Javascript Angular*ngFor在地图上运行多次，但应仅运行一次

在我的应用程序中，我尝试在地图上循环（使用

*ngFor

），并在新的扩展面板中显示每个地图键以及扩展面板“主体”中的值：

该映射以字符串作为键，以字符串数组作为值。填充完地图后，我将其传递到

this.showMap

。唯一的原因是我可以在HTML中使用

*ngIf=“showMap”

等待

showMap

，以确保在向用户显示网站之前，所有项目都在地图中：

  showMap: any;

  ngOnInit() {
    let myMap: Map<string, string[]> = new Map<string, string[]>();
    myMap.set("food", ["apple", "sausage"]);
    myMap.set("money", ["bitcoin", "dollar"]);
    //... add more key, value pairs dynamically
    this.showMap = myMap;
  }

而

getKeys（）

和

getValues（）

函数如下所示，只需返回

showMap

的键和值：

getKeys(myMap: Map<string, string[]>) {
    let keys = Array.from(myMap.keys());
    console.log("keys: ", keys);
    return keys;
  }

  getValues(myMap: Map<string, string[]>) {
    let values = Array.from(myMap.values());
    console.log("values: ", values);
    return values;
  }

getKeys（myMap:Map）{
让keys=Array.from（myMap.keys（））；
日志（“键：”，键）；
返回键；
}
getValues（myMap:Map）{
让values=Array.from（myMap.values（））；
日志（“值：”，值）；
返回值；
}

我的应用程序正在按需要运行，但在控制台日志中，我看到函数

getKeys（）

和

getValues（）

被多次调用。我希望

getKeys（）

调用一次（因为

*ngFor

语句），而

getValues（）

调用两次（每个键调用一次）。但更多，大约10倍

---

< P>不考虑一个好的实践称为模板上的函数，如@ Raz Ronen所提到的，每次角变化检测运行时都执行函数。这可能太多了！我将把值和键提取到实例变量中并使用它们，而不是直接在模板上调用函数

---

查看这篇关于它的文章：

表达式在每次更改检测中都会被重新评估，为什么您希望它只被调用一次？

getKeys(myMap: Map<string, string[]>) {
    let keys = Array.from(myMap.keys());
    console.log("keys: ", keys);
    return keys;
  }

  getValues(myMap: Map<string, string[]>) {
    let values = Array.from(myMap.values());
    console.log("values: ", values);
    return values;
  }