模板:

<div *ngFor="let $tag of m.keys()">

  <p>tag is {{$tag}}, value is : {{m.get($tag)}}</p>

</div>

export class AppComponent {

  m : Map<string, string>  = new Map([

    ['logFiles', '日志文件列表'] ,

    ['cfgFiles', '配置文件列表'] ,

    ['icdFiles', 'icd文件列表'] ,

  ]);

}

会报一个错

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has cha
nged after it was checked. Previous value: '[object Map Iterator]'. Current
value: '[object Map Iterator]'.

就是ngFor这一行

刚开始死活没想明白,我明明没有改m的值,写死的,为何迭代的时候会报错

后来查了一些资料,其中这个讲的还挺好,虽然没有完全看懂

https://blog.angularindepth.com/everything-you-need-to-know-about-the-expres
sionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

我想到了,m.keys()返回的是一个迭代器,可能ngFor里检测到这个迭代器每次迭代的时候
都会变化,才报了这个错.

加上

get ks() {

    return Array.from(this.m.keys());

}

把模板里的m.keys()改成ks就没问题了.

但我奇怪的是,这个代码不能写在模板里:

*ngFor="let $tag of [...m.keys()]"

*ngFor="let $tag of Array.from(m.keys())"

都会报错,不知道什么原因,只能写在ts代码里
--
FROM 111.47.10.*