直接在 ngFor Angular 中重复两个元素答案

【问题标题】：Repeat two elements directly in ngFor Angular直接在 ngFor Angular 中重复两个元素
【发布时间】：2020-08-24 07:24:08
【问题描述】：

角度 9

我只需要使用 *ngFor 重复两个 HTML 元素。

如果我写下面的代码

<dl>
  <div *ngFor="let item of columns">
    <dt>{{ item.name }}</dt>
    <dd>{{ item.field }}</dd>
  </div>
</dl>

然后我收到 3 个 HTML 警告

元素“div”不能嵌套在元素“dl”内
元素“dt”不能嵌套在元素“div”内
元素“dd”不能嵌套在元素“div”中

如果我写了以下代码

<dl>
  <ng-template [ngFor]="let item of columns">
    <dt>{{ item.name }}</dt>
    <dd>{{ item.field }}</dd>
  </ng-template>
</dl>

我会在运行时收到一个角度错误

ERROR 错误：未捕获（承诺）：错误：模板解析错误：解析器错误：在 [let item of columns] 中的第 1 列出现意外的记号 let

如果我写了下面的代码

<dl *ngFor="let item of columns">
  <dt>{{ item.name }}</dt>
  <dd>{{ item.field }}</dd>
</dl>

然后dl 元素将被重复，这是我根本不想要的。

谁能给我一个解决方案？

【问题讨论】：

【解决方案1】：

试试这个：

<dl>
 <ng-container *ngFor="let item of columns">
  <dt>{{ item.name }}</dt>
  <dd>{{ item.field }}</dd>
 </ng-container>
</dl>

【讨论】：

【解决方案2】：

<ng-container> 在这种情况下不起作用吗？

Angular ng-container 是一个不会干扰样式或布局的分组元素，因为 Angular 不会将它放入 DOM。

<dl>
    <ng-container *ngFor="let item of columns">
        <dt>{{ item.name }}</dt>
        <dd>{{ item.field }}</dd>
    </ng-container>
</dl>

【讨论】：