如何使用Konva修复ID为'L-000002'的文档中找不到的容器

编程问答 2022-06-08

问题描述

HTML 

<div class="h-100 w-100" [id]="layout ? layout['code'] : null"></div>

TS 

  @input() layout: object;


 drawLayout() { 
this.layout['line'] = {
      capacity: this.layout['capacity'],type: this.layout['layout'],code: this.layout['code'],styles: this.layout['styles']
    };
    // this.layout['line'] = { capacity: 18,type: 'zigzag',code: 'line-1' };
    let capacity = this.layout['line']['capacity'];

    if (this.layout['line']['type'] !== 'LINE') {
      capacity = Math.round(this.layout['line']['capacity'] / 2);

      if (!Number.isInteger(capacity)) {
        capacity++;
      }
    }

    let length = (this.blocksize * capacity) + (this.spacing * (capacity + 2));
    const WIDTH = (this.blocksize * 2) + (this.spacing * 3);

    // console.log(capacity,length,this.layout['machinestyles']);

    if (this.layout['line']['type'] === 'zigzag') {
      length += this.blocksize / 2;
    }
  stage: Stage;
    this.stage = new konva.Stage({
      width: length,height: WIDTH,container: this.layout['code'],draggable: false,scaleX: 1,scaleY: 1,});
}

如何修复错误：ExpressionChangedAfterItHaHasBeenCheckedError：检查表达式后，表达式已更改。上一个值：“未定义”。当前值：“ [object Object]”。似乎已在对其父级和子级进行脏检查后创建了该视图。它是在变更检测挂钩中创建的吗？

布局数据：

{
 code: 'L-000002',name: 'Line1',line: {
 capacity: '8',code: 'L-000002',styles: [{ code: 'L2',name: 'Lime 20',color: '#00c300' }]
}
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptkonvatypescripttypescripttypescript