Angular：如何以编程方式插入 HTML 关闭标签

Question

这就像一个学院问题。它不适合特定应用。

有一种方法可以仅使用模板来关闭具有

*ngIf

条件的 HTML 标签？

例如，我有一个有 4 列的表格。当

largeView

为 False 时，我会将行分成两列：

<table>
  <tbody>
    <tr>
      <td>first name:</td>
      <td>{{firstName}}</td>
      <ng-container *ngIf="!largeView">
        </tr><tr>
      </ng-container>
      <td>last name</td>
      <td>{{lastName}}</td>
    </tr>
    <tr>
      ...
    </tr>
  </tbody>
</table>

谢谢！

Answer 1

您可以使用 *ngIf 指令有条件地呈现表行，如下所示：

<table>
  <tbody>
    <ng-container *ngIf="largeView; else twoColumns">
      <tr>
        <td>first name:</td>
        <td>{{firstName}}</td>
      </tr>
    </ng-container>
    <ng-template #twoColumns>
      <tr>
        <td>first name:</td>
        <td>{{firstName}}</td>
      </tr>
      <tr>
        <td>last name:</td>
        <td>{{lastName}}</td>
      </tr>
    </ng-template>
    <!-- Additional rows here -->
  </tbody>
</table>