爲什麼像'filter'和'map'這樣的數組函數在'ngFor'Angular表達式中不起作用？

Question

雖然有角模板工作我發現陣列功能，如slice()作品與ngFor指令表達精絕喜歡跟着

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

在那裏，當我試圖使用陣列功能，如filter()或map()在ngFor表達喜歡跟着

<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

正如評論所說，角是非常嚴格的關於允許模板類型的表達式。這有很好的理由：例如，涉及函數調用的複雜表達式在變化檢測方面效果不佳。請記住，這些表達式實際上並不是JavaScript/TypeScript;它們僅僅是JavaScript-就像。

如果你真的想這樣做的過濾模板，然後

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

另一種方法是編寫一個管做的過濾。然而，Angular團隊也建議不要這樣做。

一般而言，更復雜的邏輯可以並且應該被寫入在該組件的TS邏輯。

順便說一句，爲slice，建議使用slice pipe。 Angular將能夠優化這個比它可能更好的.slice()。

有點關係：Support arrow functions in template syntax。