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

Posted 2023-03-05

【中文标题】直接在 ngFor Angular 中重复两个元素

【英文标题】：Repeat two elements directly in 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 元素将被重复，这是我根本不想要的。

谁能给我一个解决方案？

【问题讨论】：

您的代码运行良好。看到这个小提琴 - codesandbox.io/s/sleepy-dirac-1rjrp

【参考方案1】：

试试这个：

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

ng-container

【讨论】：

我不知道该接受哪个答案，你们都帮了我很多，我会接受其中一个解决方案，然后去其他人的其他问题的答案也给他们投票，我想成为为你们俩担心

@HakanFıstık 我回答得快了一点，所以你应该接受我的哈哈。

是的，你是对的，我按最老的顺序排列了答案，并将你的答案弹出到顶部。我会接受你的回答。

【参考方案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>

【讨论】：

是的，问题解决了，非常感谢

我不知道该接受哪个答案，你们都帮了我很多，我会接受其中一个解决方案，然后去其他人的其他问题的答案也给他们投票，我想成为为你们俩担心