Map function 在 angular

Question

我有兩個 arrays：

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() function 運行時您都將新項目推入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 中調用 function 調用 onInit() 所以它的加載一次