在 Angular2 *ngFor 循环中无法从对象数组创建画布元素答案

【问题标题】：In Angular2 *ngFor loop cannot create canvas elements from array of objects在 Angular2 *ngFor 循环中无法从对象数组创建画布元素
【发布时间】：2016-07-08 20:45:55
【问题描述】：

在我的 TypeScript 类中，我可以加载一个 HTMLCanvasElement 类型的数组 - 但是当我使用 ngFor 遍历这个数组时 - 我只能在页面上看到加载的每个画布对象的文本：“[object HTMLCanvasElement]”。

我的模板代码要点：

<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);

我的假设可能是错误的：但是，如果您可以将画布对象附加到节点（我可以这样做） - 那么为什么不能使用 * 将画布对象“直接”放置在 div 内的窗口上ngFor?

【问题讨论】：

标签： javascript arrays canvas angular

【解决方案1】：

使用@Input() 所需的图像和其他选项创建组件
在组件中移动你的画布创建代码
在您展示的组件中，使画布成为一个对象数组，其中包含每个画布的信息
在 ngFor 中，通过将信息传递给组件来呈现您创建的画布组件

您的代码不起作用，因为您试图使用插值 {{}} 对 ngFor 中的 HTMLCanvasElement 进行字符串化

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

使用 javascript 对象代替推送 html 对象。
让 HTML 创建 HTML 元素，而不是使用 document.createElement
避免在 Angular 组件中使用 document.getElementById
查看 View Child 的用法以获取组件

plunker 仍有改进的余地，但您会了解使用上面的 plunk 在 Angular 中创建组件的要点

【讨论】：

感谢您的帮助，Siraj - 您能帮我澄清一些事情吗？在您的第一个项目符号中-您是在说“创建一个附加组件吗？第二个项目符号：”将您的画布创建代码移动到新组件中？一个简单但清晰的例子会很有帮助 - 谢谢！
用当前代码创建一个plunker，我帮你修改
我正在审查您的 plunker 提示：如果您在 Angular 组件中使用类似 document.getElementById 的任何东西 - 请知道这是错误的，并且可能有 Angular-ish 方式来执行此操作。
document.createElement("canvas") inside Angular Component 也是严格的 no - no
谢谢，西拉杰！我渴望学习——我添加了这个 hack 只是为了尝试在页面上获取画布——但这就是为什么我确实想学习 Angular2 的方式——并且想了解如何甚至是否可以从数组并使用 *ngFor 将它们放入窗口 - 再次感谢您的帮助！