在 Angular 中使用 ngFor 创建织物画布

Posted

技术标签:

【中文标题】在 Angular 中使用 ngFor 创建织物画布【英文标题】:Create fabric canvas with ngFor in Angular 【发布时间】:2018-05-09 23:38:24 【问题描述】:

我正在使用带有 Angular 4 的 fabric.js。我设法在组件内创建了一个画布并成功地在它上面绘制。

我在 file.ts 中使用了this.canvas = new fabric.Canvas('canvas1',); this.canvas.add(New fabric.Rect...)

然后我尝试生成多个画布,我在我的画布元素上使用 *ngFor 并设法将 id 属性设置为 canvas1、canvas2...

现在相同的代码this.canvas = new fabric.Canvas('canvas1',); ... a 不再工作,就好像没有 id = canvas1 的画布一样。当我检查 dom 时,元素就在那里。

*ngFor 打破了这一点,或者我错过了什么?

【问题讨论】:

【参考方案1】:

我发现了问题,绘制代码是在视图准备好之前执行的,在执行ngFor之前。

解决方案是在视图准备好后使用ngAfterViewInit()执行代码

【讨论】:

以上是关于在 Angular 中使用 ngFor 创建织物画布的主要内容,如果未能解决你的问题,请参考以下文章

Angular2:输入控制带有ngFor的表单标签内的损失值

带有 ngFor 输入的 Angular 2 模板驱动表单

Angular 6:在 *ngFor 中的 formArray 上使用 ngx-pagination 不会更改视图中的控件

使用 *ngFor 的 Angular 2 第一项在数组中丢失

在 div 中使用 ngFor 时,Angular 2 模板解析错误

在 Angular 2 中打破 NgFor 循环