ng2：ngForループで変数を作成する方法

Question

ngForループで変数を作成する方法を調べようとしています。

私はこのようなループを持っている：

<td *ngFor="#prod of products"> 
    <a href="{{getBuild(branch,prod)?.url}}"> 
    {{getBuild(branch,prod)?.status}} 
    </a> 
</td> 

あなたが「getBuild」コールを複数回繰り返す必要が見ることができます。 （私の実際の例では何度も）。テンプレート内でこの変数をループ内に作成して再利用する方法が欲しいです。これを行う方法はありますか？

Answer 1

をplunk。

実際、HTML要素にローカル変数を定義すると、それはコンポーネントが存在する場合に対応します。要素に要素がない場合、変数は要素自体を参照します。

ローカル変数の値を指定すると、現在の要素に関連付けられている特定のディレクティブを選択できます。例えば：

<input #name="ngForm" ngControl="name" [(ngModel)]="company.name"/> 

はname変数に現在関連付けられngForm指令のインスタンスを設定します。

ローカル変数は、ループの現在の要素に対して作成された値を設定することを目的としていません。

あなたがそのような何かをしようとした場合：

<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に一致するディレクティブを探します）... https://plnkr.co/edit/qcMGr9FS7yQD8LbX18uY?p=preview

このリンクを参照してください：http://victorsavkin.com/post/119943127151/angular-2-template-syntax、セクション「ローカル変数」fそれ以上の詳細。 index、last、evenとodd：

反復の現在の要素に加えて、ngForはローカル変数にエイリアスすることができるエクスポート値のセットを提供します。

このリンクを参照してください：あなたは何ができるか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> 

Answer 2

いいえ、それぞれbranch/prodの組み合わせで、または以前と同じ値で呼び出されている限り、結果をgetBuildにキャッシュしてください。

Answer 3

これはサブコンポーネントを作成するための古典的なケースだと思います。

<td *ngFor="#prod of products"> 
    <subComp [prod]=prod></subComp> 
</td> 

あなたのコンポーネントは、prod入力を持ち、OnInitに一度必要な機能を実行します。

簡単な例では、私が（#文字で定義された）ローカル変数は、ご利用の場合には適用されませんと思いますhere