ngFor loop
で変数を作成する方法を見つけようとしています。
このようなループがあります:
<td *ngFor="#prod of products">
<a href="{{getBuild(branch,prod)?.url}}">
{{getBuild(branch,prod)?.status}}
</a>
</td>
getBuild
呼び出しを複数回繰り返す必要があることがわかります。 (私の実際の例ではもっと多くの回数)。ループ内で一度テンプレートにこの変数を作成し、単純に再利用する方法が欲しいです。
これを行う方法はありますか?
ローカル変数(#
文字で定義)はユースケースには適用されないと思います。
実際、HTML要素でローカル変数を定義すると、それがコンポーネントに対応します(存在する場合)。要素にコンポーネントがない場合、変数は要素自体を参照します。
ローカル変数の値を指定すると、現在の要素に関連付けられている特定のディレクティブを選択できます。例えば:
<input #name="ngForm" ngControl="name" [(ngModel)]="company.name"/>
ngForm
変数の現在に関連付けられているname
ディレクティブのインスタンスを設定します。
したがって、ローカル変数は、必要なものをターゲットにしません。つまり、ループの現在の要素に対して作成された値を設定します。
そのようなことをしようとすると:
<div *ngFor="#elt of eltList" >
<span #localVariable="elt.title"></span>
{{localVariable}}
</div>
次のエラーが発生します。
Error: Template parse errors:
There is no directive with "exportAs" set to "elt.title" ("
<div *ngFor="#elt of eltList" >
<span [ERROR ->]#localVariable="elt.title"></span>
{{localVariable}}
</div>
"): AppComponent@2:10
Angular2は、実際に指定された名前elt.title
に一致するディレクティブを探します)...このplunkrを参照して、エラーを再現します。 https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview
このリンクを参照してください: http://victorsavkin.com/post/119943127151/angular-2-template-syntax 、詳細については「ローカル変数」セクション。
繰り返しの現在の要素に加えて、ngFor
は、ローカル変数にエイリアスできるエクスポートされた値のセット(index
、last
、even
、odd
)のみを提供します。
このリンクを参照してください: https://angular.io/docs/ts/latest/api/common/NgFor-directive.html
ループ内の要素を表示するサブコンポーネントを作成することです。現在の要素をパラメーターとして受け入れ、コンポーネントの属性として「ローカル変数」を作成します。その後、コンポーネントのテンプレートでこの属性を使用できるようになるため、ループ内の要素ごとに1回作成されます。サンプルを次に示します。
@Component({
selector: 'elt',
template: `
<div>{{attr}}</div>
`
})
export class ElementComponent {
@Input() element;
constructor() {
// Your old "localVariable"
this.attr = createAttribute(element.title);
}
createAttribute(_title:string) {
// Do some processing
return somethingFromTitle;
}
}
そしてそれを使用する方法:
<div *ngFor="#elt of eltList" >
<elt [element]="elt></elt>
</div>
これは、サブコンポーネントを作成するための古典的なケースだと思います。
<td *ngFor="#prod of products">
<subComp [prod]=prod></subComp>
</td>
コンポーネントにはprod
入力があり、OnInit
で必要な関数を1回実行します。
簡単なプランクの例 here
angular 4を使用すると、次のことができます。
<td *ngFor="#prod of products">
<div *ngIf="getBuild(branch,prod); let build">
<a href="{{build.url}}">
{{build.status}}
</a>
</div>
</td>
いいえ、各getBuild
/branch
の組み合わせごとに、または以前と同じ値で呼び出される限り、結果をprod
にキャッシュするだけです。