web-dev-qa-db-ja.com

ngFor内の動的テンプレート参照変数（Angular 2）

ngFor要素内で動的テンプレート参照変数を宣言する方法は？

Ng-bootstrapのポップオーバーコンポーネントを使用したい場合、ポップオーバーコード（Htmlバインディングを使用）は次のようになります。

<ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template>
    <button type="button" class="btn btn-secondary" [ngbPopover]="popContent" popoverTitle="Fancy content">
    I've got markup and bindings in my popover!
</button>

どうすればwrapngFor内の要素を？

<div *ngFor="let member of members">
    <!-- how to declare the '????' -->
    <ng-template #????>Hello, <b>{{member.name}}</b>!</ng-template>
        <button type="button" class="btn btn-secondary" [ngbPopover]="????" popoverTitle="Fancy content">
        I've got markup and bindings in my popover!
    </button>
</div>

うーん...何かアイデア？

angularng-bootstrapangular-template
49
Boo Yan Jiong

テンプレート参照変数は、それらが定義されているテンプレートにスコープされます。構造ディレクティブはネストされたテンプレートを作成するため、別のスコープを導入します。

したがって、テンプレート参照に1つの変数を使用できます

<div *ngFor="let member of members">
  <ng-template #popupContent>Hello, <b>{{member.name}}</b>!</ng-template>
  <button type="button" class="btn btn-secondary" [ngbPopover]="popupContent" popoverTitle="Fancy content">
      I've got markup and bindings in my popover!
  </button>
</div>

<ng-template ngFor内で既に宣言されているため、動作するはずです

プランカーの例

詳細については、以下も参照してください。

51
yurzui

これは私が見つけた最良の解決策です： https://stackoverflow.com/a/40165639/3870815

その答えでは、彼らは使用します：

@ViewChildren('popContent') components:QueryList<CustomComponent>;

これらの動的に生成されたコンポーネントのリストを作成します。ぜひチェックしてみてください！

3
Alex Boisselle