ngFor中直接重复两个元素Angular

Question

Angular 9

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

如果我写下面的代码

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

然后我收到 3 HTML 个警告

Element 'div' cannot be nested inside element 'dl'
Element 'dt' cannot be nested inside element 'div'
Element 'dd' cannot be nested inside element 'div'

如果我写了下面的代码

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

我将在运行时收到 angular 错误

ERROR Error: Uncaught (in promise): Error: Template parse errors: Parser Error: Unexpected token let at column 1 in [let item of columns]

如果我写了下面的代码

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

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

有人可以给我一个解决方案吗？

Answer 1

试试这个：

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

ng-container

Answer 2

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

The Angular ng-container is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.

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

ngFor中直接重复两个元素Angular

Repeat two elements directly in ngFor Angular

html

angular

ngfor