ngFor 地图对象

Question

我很难理解 ngFor 如何与 map 一起工作。

所以这是我的 HTML 代码：

<div *ngFor="let country of wars.getCountrys()">

这里是我的 TypeScript 代码：

wars: Map < number, Array < country> > = new Map < number, Array < country > > ();

getCountrys() {
    console.log('getCountrys()');
    return Array.from(this.wars.keys());
}

一切正常，但是在控制台中我有 2 个 getCountrys() 我不明白为什么函数 getCountrys() 被调用了 2 次。

Answer 1

在Angular中，有一个叫做ChangeDetection的东西它基本上是检测组件数据何时更改，然后自动重新渲染视图以反映该更改。

在 angular 应用程序的开发模式下，完成了一个额外的检测周期，这意味着现在我们有两个检测周期。

这两个循环导致您的方法执行两次。

Answer 2

不要使用函数生成数组。在构造函数中将其作为变量创建。

在构造函数中：

this.countries = Array.from(this.wars.keys());

在html中：

<div *ngFor="let country of countries">

ngFor 地图对象

ngFor map object

html

typescript

ngfor

angular