在嵌套组件中打开模态。最佳做法是什么？

Question

<app-loop4 *ngFor="let d4 of data4"> 
  <app-loop3 *ngFor="let d3 of d4">
    <app-loop2 *ngFor="let d2 of d3">
      <app-loop *ngFor="let data of d2">
        <app-form-modal [data]="data"></app-form-modal>
      </app-loop>
    </app-loop2>
  </app-loop3>
</app-loop4>

//This is what's inside
<app-form-modal [data]="data"></app-form-modal>
<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>{{ data.value1 }}</p>
    <p>{{ data.value2 }}</p>
    <p>{{ data.value3 }}</p>
    <p>{{ data.value4 }}</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
  </div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>

这是一个好习惯吗？

在我的选项中，最好的方法是只创建一个按钮，该按钮调用* ngFor 之外的模式模板（模式模板应位于 * ngFor）并动态生成其中的数据，而不是在ngFor内部多次生成模式。

但是我该如何实现呢？