Biến tham chiếu mẫu động bên trong ngFor (Angular 9)

Làm thế nào để khai báo một biến tham chiếu mẫu động bên trong một phần tử?ngFor

Tôi muốn sử dụng thành phần cửa sổ bật lên từ ng-bootstrap, mã cửa sổ bật lên (có ràng buộc Html) như được hiển thị:

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

Làm thế nào tôi có thể bọc các yếu tố đó bên trong 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>

Hmmm ... có ý kiến ​​gì không?

Các biến tham chiếu mẫu nằm trong phạm vi khuôn mẫu mà chúng được định nghĩa. Một chỉ thị cấu trúc tạo ra một khuôn mẫu lồng nhau và do đó, giới thiệu một phạm vi riêng biệt.

Vì vậy, bạn chỉ có thể sử dụng một biến để tham chiếu mẫu của mình

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

và nó sẽ hoạt động vì nó đã được khai báo bên trong <ng-template ngFor

Ví dụ về Plunker

Để biết thêm chi tiết xem thêm:

• góc - templateref bản sao có điều kiện trong ng-content với bộ chọn

Đây là giải pháp tốt nhất mà tôi đã tìm thấy: https://stackoverflow.com/a/40165639/3870815

Trong câu trả lời đó, họ sử dụng:

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

Để xây dựng danh sách các thành phần được tạo động đó. Rất khuyến khích bạn kiểm tra nó ra!

Một cách khác để cho phép điều này là tạo một thành phần bao bọc nút và ng-template

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

Và có phần sau trong thành phần nút bật lên

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

Bạn có thể sử dụng trackBy: trackByFntrong*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>