49

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

次のようなループがあります。

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

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

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

4

7 に答える 7

18

ローカル変数（#文字で定義）はユースケースには当てはまらないと思います。

実際、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>
于 2016-02-07T20:15:10.890 に答える
17

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

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

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

簡単な例のプランクはこちら

于 2016-02-07T20:04:41.383 に答える