web-dev-qa-db-ja.com

ngForループで変数を作成する方法は？

ngFor loopで変数を作成する方法を見つけようとしています。

このようなループがあります：

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

getBuild呼び出しを複数回繰り返す必要があることがわかります。 （私の実際の例ではもっと多くの回数）。ループ内で一度テンプレートにこの変数を作成し、単純に再利用する方法が欲しいです。

これを行う方法はありますか？

angularngfor
33
Allen

ローカル変数（#文字で定義）はユースケースには適用されないと思います。

実際、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>
13
Thierry Templier

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

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

コンポーネントにはprod入力があり、OnInitで必要な関数を1回実行します。

簡単なプランクの例 here

14
Mark Meyer

angular 4を使用すると、次のことができます。

<td *ngFor="#prod of products">
  <div *ngIf="getBuild(branch,prod); let build">
    <a href="{{build.url}}">
     {{build.status}}
    </a>
  </div>
</td>
4
davidivad

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

2
Günter Zöchbauer