嗨，我正在嘗試在 html 模板中以 angular 執行此操作。它顯示了我想要的圖示，但該函式經常被呼叫......我在這里錯過了什么？模板
<li class="pet-list__entry" *ngFor="let pet of listOfPets">
<div class="pet-list__entry__image-segment">
<fa-icon [icon]=getIcon(pet.type)></fa-icon>
</div>
<div class="pet-list__entry__data-segment">
{{ pet.name }}
</div>
</li>getIcon(id: string): string {
const iconName = this[id];
console.log(iconName);
return iconName;
}![Angular 11 為 fa-icon 動態分配 [icon] 屬性](https://img.uj5u.com/2021/11/03/cabccaf6a2a942f3a2b0323790108e79.png)
uj5u.com熱心網友回復：
您的代碼沒有任何問題。getIcon()由于 Angular 的作業方式，該函式被呼叫了很多次。[]在每個變更檢測周期評估屬性系結。
請在此處查看此問題以獲取完整說明。
但是你可以優化它系結到一個屬性而不是一個函式，這是系結屬性的推薦方式。
例如，在您的情況下，如果您知道可能的圖示類是什么，您可以執行以下操作：
// component.ts
const icons = {
1: 'dog',
2: 'cat'
}
<!-- component.html -->
...
<fa-icon [icon]="icons[pet.type]"></fa-icon>
...
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/345353.html
標籤：有角的