在相同的 *ngIf else 条件下加载两个模板

Question

这是一个从组件加载数据的 material 布局 table。作为加载按钮模板的条件，有必要将模板名称通知列，然后 ngIf 条件按要求满足：

    <ng-container *ngIf="tableData !== 'action'; else action"> <!--condition is ok -->
      <th mat-header-cell *matHeaderCellDef mat-sort-header>
        {{ columnHeader[tableData] }}
      </th>
      <td mat-cell *matCellDef="let element">{{ element[tableData] }}</td>
    </ng-container>

模板正确加载并呈现：

    <ng-template #action>
      <th mat-header-cell *matHeaderCellDef>Actions</th>
      <td mat-cell *matCellDef="let element">
          bla bla bla action
      </td>
    </ng-template>

我只需要同时加载另一个模板，但嵌套不起作用，我不知道如何在 ngIf 中加载两个模板：

 <!--the template not loading-->
    <ng-template #activity>
    <th mat-header-cell *matHeaderCellDef>Actions</th>
    <td mat-cell *matCellDef="let element">
          bla bla bla activity
    </td>
  </ng-template>

Answer 1

您可以使用 *ngTemplateOutlet 呈现另一个模板，将模板引用变量传递给它。

<ng-container *ngIf="tableData !== 'action'; else action"> 
  <h1>hello</h1>
</ng-container>

<ng-template #action>
  <h1>hello again</h1>
  <ng-container *ngTemplateOutlet="activity"></ng-container>
</ng-template>

<ng-template #activity>
  <h1>world again</h1>
</ng-template>

工作示例：- https://stackblitz.com/edit/angular-ivy-l596t2?file=src%2Fapp%2Fapp.component.html

在相同的 *ngIf else 条件下加载两个模板

Load two templates in the same *ngIf else condition

angular-material

angular