我試圖避免在 Angular 模板中使用方法呼叫，因為它們在那里表現不佳。假設我有一個名字串列：
const names: string[] = ['Billy', 'Mandy', 'Carl', 'Sheryl']
在我的模板中，我使用 ngFor 來迭代串列并列印名稱：
<ng-container *ngFor="let name of names">
<p>{{ name }}</p>
</ng-container>
但是現在我只需要顯示以“S”開頭的名稱，所以我更改為：
<ng-container *ngFor="let name of names">
<p *ngIf="doesNameStartWithS(name)">{{ name }}</p>
</ng-container>
現在我的模板中有一個方法，我知道它運行的次數將超過必要的次數。為了避免這種情況，我可以執行以下操作：
// this runs whenever the names list changes
const nameStartsWithSList: boolean[] = this.names.map((name: string): boolean => this.doesNameStartWithS(name));
然后將我的模板更改為：
<ng-container *ngFor="let name of names; let i = index;">
<p *ngIf="nameStartsWithSList[i]">{{ name }}</p>
</ng-container>
但這完全引入了一個新串列，以避免模板中的方法呼叫。有沒有更好的方法來做到這一點？
uj5u.com熱心網友回復：
這是一個非常有趣的問題。
一種可能的解決方案是將前綴和欄位傳遞給指令并相應地對其進行操作。您可能可以使用 renderer2 作為更好的解決方案來呈現帶有您想要的欄位的段落，但這只是為了展示它的作業原理。
@Input() chars: string;
@Input() field: string;
constructor(private el: ElementRef) {}
ngOnInit() {
if (this.field.toLowerCase().includes(this.chars.toLowerCase())) {
(this.el.nativeElement as HTMLElement).innerHTML = `<p>${this.field}</p>`;
}
}
另一件事（我實際上剛剛意識到）是您也可以將指令用作組件。
<ng-container *ngFor="let name of names">
<showIfStartsWith chars="s" [field]="name"></showIfStartsWith>
</ng-container>
完整演示在這里。
編輯： 找到另一個不那么奇怪的解決方案，不使用指令作為組件。演示 V2
編輯 2： 找到另一個解決方案，使用指令作為結構指令，展示如何將多個引數傳遞給它。演示 V3
uj5u.com熱心網友回復：
我認為最好的方法是在 ts 檔案中操作您的串列。
如果您的起始清單是：
const names: string[] = ['Billy', 'Mandy', 'Carl', 'Sheryl']
像這樣設定
output(array, modifier) {
***modify array to return only starting with modifier letter***
return modifiedArray
}
modifier: string = 's'
const names: string[] = output(['Billy', 'Mandy', 'Carl', 'Sheryl'], modifier)
然后使用
<div *ngFor="let name of names"> ...
uj5u.com熱心網友回復：
我想在這種情況下，我會使用一個管道來轉換或過濾給定的資料，如下所示：
first-upper.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'firstUpper',
})
export class FirstUpperPipe implements PipeTransform {
transform(value: string, letter: string): any {
if(value.startsWith(letter)){
return value;
}
}
}
畢竟在您的模板中，您可以像這樣使用：
<ng-container *ngFor="let name of names">
<p>{{ name | firstUpper:'S' }}</p>
</ng-container>
如果你有 或 app.module.ts 宣告部分，你應該在你的 pipe.module.ts 中匯入這個管道。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/380308.html