在Angular2 *中，ngFor循环不能从对象数组创建画布元素

Question

在我的TypeScript类中，我可以加载一个类型为HTMLCanvasElement的数组 - 但是当我用ngFor迭代这个数组时 - 我只在页面上看到加载的每个画布对象的文本：＆＃34; [object HTMLCanvasElement]＆＃34 ;

我的模板代码的要点：

<div>*ngFor="#cvs of canvases">  
{{cvs}} </div>

相关班级代码：

canvases:HTMLCanvasElement[]=[]
var canvas = document.createElement("canvas");
//here I take an image and drawimage via context -- this part works
//then......
this.canvases.push(canvas);

我的假设可能是错误的：但是，如果你可以将一个画布对象附加到一个节点（我可以做） - 那么为什么你不能将画布对象放到窗口上直接＆＃34;在div中使用* ngFor？

Answer 1

• 使用图像和@Input（）
所需的其他选项创建一个组件
• 将画布创建代码移动到组件中
• 在您显示的组件中，画布包含每个画布信息的对象数组
• 在ngFor中，通过将信息传递给组件来渲染您创建的画布组件

您的代码无法正常工作，因为您尝试使用插值{{}}

在ngFor中对HTMLCanvasElement进行字符串化

这是工作的Plunker https://plnkr.co/edit/1ho41z

• 而不是使用javascript对象推送html对象。
• 让HTML创建HTML元素，而不是使用var cpl = (from cpmcId in CPMCIdList join tpm in tpml on cpmcId equals tpm.CPMCId into tpmg join tpmc in tpmcl on cpmcId equals tpmc.CPMCId into tpmcg select new CPMC { CPMCId = cpmcId, tpm = tpmg.ToList(), tpmc = tpmcg.ToList() }).ToList();
• 避免在Angular组件
中使用document.getElementById
• 查看View Child的用法以获取组件

羽毛球仍然有改进的范围，但是您可以通过上面的插件获得在Angular中创建组件的要点