angular 中的地图函数

Question

我有两个数组：

names = ['asdf', 'eli', 'neo', 'rashi'];
fullName = [];

doMap() {
    this.names.map((name) => {
      let nn = name.concat(' qwerty').toUpperCase();
      this.fullName.push(nn);
    });
  }

在 .html 文件中，我使用字符串插值调用数组并通过 ngFor 指令循环它：

{{ doMap() }}

      <div *ngFor="let name of fullName; let i = index">
        {{ i + 1 }} {{ name }}
      </div>

但是 o/p 显示的是：

1 ASDF QWERTY
2 ELI QWERTY
3 NEO QWERTY
4 RASHI QWERTY
5 ASDF QWERTY
6 ELI QWERTY
7 NEO QWERTY
8 RASHI QWERTY
9 ASDF QWERTY
10 ELI QWERTY
11 NEO QWERTY
12 RASHI QWERTY

我的问题是为什么它会重复三次而不是一次？

Answer 1

因为每次 doMap() 函数运行时您都将新项目推入 fullName 数组，并且由于 Angular 触发的变化检测周期，它运行了不止一次。您可能想要的是始终创建一个相同的数组，而不是改变现有数组并向其添加新条目。

doMap() {
  return this.names.map((name) => {
    return name.concat(' qwerty').toUpperCase();
  });
}

<div *ngFor="let name of doMap(); let i = index">
   {{ i + 1 }} {{ name }}
</div>

Answer 2

而不是在 html 调用 onInit() 中的函数，所以它只加载一次

angular 中的地图函数

Map function in angular

html

angular

dictionary

ngfor

angular9