Использование ngIf без дополнительного элемента в Angular 2

Могу ли я использовать ngIf без дополнительного элемента контейнера?

<tr *ngFor="...">
  <div *ngIf="...">
    ...
  </div>
  <div *ngIf="!...">
    ...
  </div>
</tr>

Он не работает в таблице, потому что это сделает неверный HTML.

Ответы

Ответ 1

ng-container предпочтительнее template:

<ng-container *ngIf="expression">

См:

Angular 2 ng-container

https://github.com/angular/angular.io/issues/2303

Ответ 2

Я нашел метод для этого: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template.

Вы можете просто использовать тег <template> и заменить *ngIf на [ngIf] следующим образом.

<template [ngIf]="...">
  ...
</template>

Ответ 3

Вы не можете поместить div непосредственно внутри tr, что приведет к недопустимому HTML. tr может содержать только элемент td/th/table, и внутри них могут быть другие элементы HTML.

Вы можете слегка изменить свой HTML, чтобы иметь *ngFor над tbody и иметь ngIf поверх tr, как показано ниже.

<tbody *ngFor="...">
  <tr *ngIf="...">
    ...
  </tr>
  <tr  *ngIf="!...">
    ...
  </tr>
  ..
</tbody>