為什么在Angular的ngFor表達式中不能使用諸如filter和map這樣的數組函數？

Question

在使用角度模板時，我發現像slice()這樣的數組函數與ngFor指令表達式（如以下slice()一起使用時絕對可以正常工作

<div *ngFor="let item of arry.slice(3)">
  {{ item.name }}
</div>

當我嘗試在ngFor表達式中使用諸如filter()或map()類的數組函數時，如下所示

<div *ngFor="let item of arry.filter(i => i.marks > 40)">
  {{ item.name }}
</div>

它給了我角度模板解析錯誤

Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors: Parser Error: Bindings cannot contain assignments at column 25 in [let item of arry.filter(i => i.marks > 40)]

為了理解這種行為背后的原因，我試圖找出一些有關此類限制的文檔，但沒有找到。 任何線索或解釋將不勝感激。

Answer 1

如評論中所述，Angular對於模板中允許的表達式類型非常嚴格。 這樣做有充分的理由：例如，涉及函數調用的復雜表達式在更改檢測中不能很好地發揮作用。 請記住，這些表達式實際上不是JavaScript / TypeScript。 他們只是像 JavaScript 一樣 。

如果您真的想在模板中進行此過濾，則

<div *ngFor="let item of arry">
  <ng-container *ngIf="item.marks > 40">
    {{ item.name }}
  </ng-container>
</div>

另一種選擇是編寫管道進行過濾。 但是，Angular團隊也建議不要這樣做。

通常，可以並且應該在組件的TS邏輯中編寫更復雜的邏輯。

順便提一下，對於slice ，建議使用切片管 。 Angular可以比.slice()更好地優化它。

有點相關： 支持模板語法中的箭頭功能 。