在下面的代碼片段中，我為 3 個不同的屬性呼叫了名為 isSiteAlreadyAdded(site.id) 的相同函式。有什么方法可以存盤特定選項標簽的值并將其用于給定的選項屬性？
<div class="template-form-input-container">
<select style="width: 100%;" id="sites" [(ngModel)]="site" name="sites" #sites="ngModel" required>
<option [ngValue]="null" selected>Select Site</option>
<option *ngFor="let site of sitesToAdd" [ngValue]="site" data-toggle="tooltip" data-placement="top" title="{{isSiteAlreadyAdded(site.id) ? 'Site is already added.':''}}" [ngClass]="{'alert alert-secondary': isSiteAlreadyAdded(site.id)}" [disabled] = "isSiteAlreadyAdded(site.id)">{{site.name}}</option>
</select>
</div>
uj5u.com熱心網友回復：
正如@dan vid 的鏈接帖子中所述，模板中的函式呼叫是一種不好的做法，因為它們將在每次更改檢測滴答時執行。
因此，您可以使用管道，也可以預先計算相應的值。
管道
如果您使用的是管你還算值多次，但只有當的管道變化的輸入值，它通過減少重新計算的次數不少相比，在模板函式呼叫。
一個基本的管道看起來像這樣：
@Pipe({ name: 'isAlreadyActive' })
export class IsAlreadyActivePipe implements PipeTransform {
transform(id: string): boolean { // <- or any other return type instead of boolean
// Implement your check and return the result
}
}
您的情況下的電話如下所示：
<option
...
title="{{ site.id | isAlreadyActive ? 'Site is already added.': '' }}"
...
>
{{site.name}}
</option>
您將在此處找到有關管道的更多資訊。
將條件結果存盤在變數中
還可以將管道回傳值存盤在變數中（請參閱此處）。
這看起來像這樣：
<ng-container *ngIf="site.id | isAlreadyActive as isActive">
<option
...
title="{{ isActive ? 'Site is already added.': '' }}"
...
>
{{site.name}}
</option>
</ng-container>
在此示例中，我們已將結果存盤在其中，isActive并且您的計算只會執行一次，但只要回傳值是falsy的內容*ngIf就不會顯示。
例如，在您的情況下，您可以回傳而不是簡單的布林值和包含布林值的物件，例如， { isActive: returnValue }。這樣你的回傳值就會是truthy，內容會被顯示。
預計算
另一種選擇是預先計算組件中的值并將該值分配給site.isActive作為示例。這樣你就只有一個計算，這也比從模板呼叫函式要好。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/390676.html
標籤：javascript 有角的
上一篇：訪問物件的屬性
下一篇：如何在CRUD方法中重用可觀察值