2017-11-08 6 views
0

Ionic 3アプリ(Angular4をカバーしている)の* ngForループの繰り返しごとに2回呼び出されるユーティリティメソッドがあります。 (以下のgetIndex2に似ています)。ローカル変数のAngular2 +テンプレート構文* ngFor

ローカル変数と参照を割り当てる方法があるので、ユーティリティメソッドは反復ごとに2回呼び出されませんか?

フォームの何か:

<div *ngfor="let item of items; 
      let i = index; 
      let j = getIndex2(items[i]); 
      let k = items[j]"> 
    {{k.property1}} 
    {{k.property2}} 
</div> 

それはあまりにもas、または#構文を使用することができますが、それが可能だかどうかを知るためにいいだろう。

答えて

0

getIndex2()が何をするのか確認してくださいますが、あなただけの現在の項目を参照したい場合はすべてを行う必要がある:

<div *ngfor="let item of items"> 
    {{ item.property1 }} 
    {{ item.property2 }} 
</div> 

しかし、私はそれがそうでないと仮定します。他に必要なことは、テンプレートマークアップの外でロジックの部分を処理することです。たとえば、次のように私がまだ知らなかった何かを教えてくれない

<div *ngfor="let item of items"> 
    {{ item.otherItem.property1 }} 
    {{ item.otherItem.property2 }} 
</div> 
+0

this.items = this.items.map((item) => item.otherItem = this.getIndex2(item)); 

そして。それは私が再計算する必要はないユーティリティメソッドへの呼び出しです。 – JGFMK

+1

コードをリファクタリングする必要がありますが、無効です。 '* ngFor'ディレクティブは、index、first、last、evenの4つの変数をとります。それでおしまい。あなたがしなければならないことは、コンポーネントクラス(またはサービス)にあなたのロジックを置くことです。 – unitario

+0

ループの中にメソッド呼び出しの結果を格納する方法がいくつかあるので、2回以上必要なときには1回だけ呼び出されるため、計算は1回だけ発生します。何らかのレイジーローディングキャッシュutllityメソッドは他の選択肢になりますが、ステートフルなコードを作ることは、むしろ避けたいものです。 – JGFMK