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

要素内で動的 テンプレート参照変数を宣言するにはどうすればよい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>

これらの要素を内部にラップするにはどうすればよいngForですか？

<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>

うーん...何か考えはありますか？

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

したがって、テンプレート参照に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

プランカーの例

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

• 角度-セレクターを使用したng-contentの条件付き重複templateref

これは私が見つけた最高のソリューションです：https：//stackoverflow.com/a/40165639/3870815

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

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

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

これを可能にする別の方法は、ボタンとng-templateをラップするコンポーネントを作成することです。

<div *ngFor="let member of members">
    <popover-button [member]="member"></pop-over-button>
</div>

そして、ポップオーバーボタンコンポーネントに次のものがあります

<ng-template #popContent>Hello, <b>{{member.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>

あなたは使用することができますtrackBy: trackByFnで*ngFor

<div *ngFor="let member of members;trackBy: trackByF">
    <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>