角度映射函数答案

【问题标题】：Map function in angular角度映射函数
【发布时间】：2020-11-29 23:24:38
【问题描述】：

我有两个数组：

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

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

【问题讨论】：

标签： html angular dictionary ngfor angular9

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：