Повторить два элемента прямо в ngFor Angular - PullRequest
Новая
       29

Повторить два элемента прямо в ngFor Angular

3 голосов
/ 08 мая 2020

Angular 9

Мне просто нужно повторить два элемента HTML, используя * ngFor.

, если я напишу следующий код 

<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>

Я получу angular ошибку во время выполнения

ERROR Ошибка: Неперехвачено (в обещании): Ошибка: Ошибки синтаксического анализа шаблона: Ошибка синтаксического анализатора: Неожиданный токен let в столбце 1 в [let элемент столбцов]

и если я написал следующий код 

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

, то элемент dl будет повторяться, и это то, чего я совсем не хочу.

Может ли кто-нибудь дать мне решение для этого?

Ответы [ 2 ]

4 голосов
/ 08 мая 2020

Попробуйте это: 

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

ng-container

3 голосов
/ 08 мая 2020

Не работает ли <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>
...