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

Question 1

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

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

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

Question 2

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

<ng-container *ngIf="expression">

Видеть:

Угловой 2 нг-контейнер

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

Question 3

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

Вы можете просто использовать <template>тег и заменить *ngIfс , [ngIf]как это.

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

Question 4

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

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

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

Answer 1

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

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

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

Answer 2

173

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

<ng-container *ngIf="expression">

Видеть:

Угловой 2 нг-контейнер

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

Александр Тейлор
источник

Вы должны добавить образец «сгенерировать» фрагмент HTML, чтобы было ясно, что элемент HTML <ng-container> не создается.

Сергей

Answer 3

Вы должны добавить образец «сгенерировать» фрагмент HTML, чтобы было ясно, что элемент HTML <ng-container> не создается.

Сергей

Answer 4

21

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

Вы можете просто использовать <template>тег и заменить *ngIfс , [ngIf]как это.

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

Янисприцкау
источник

хорошо, но * ng Если itslef создает templateтег, по умолчанию угловые директивы с префиксом * создают тег шаблона. так что оба одинаковы[ngIf] and *ngIf

Пардип Джайн 03

1

У *ngIfвас есть элемент внутри шаблона, которого нет, если вы templateсами пишете . При определенных обстоятельствах дополнительный элемент может мешать.

Teak

Можем ли мы поместить templateтег внутрь, tr/ tdtag?

Панкадж Паркар,

Да, это особый элемент. По определению это запрещено w3.org/TR/html401/struct/tables.html#h-11.2.3, но он будет работать и отображаться. Если я использую * ng, если он не работает, кстати. но с [ngIf] это так. Могу я спросить, можете ли вы сказать мне, почему это так?

sascha10000 06

1

@ sascha10000 Потому что наличие *ngIf="foo"эквивалентно <template [ngIf]="foo">тегу упаковки . Короче template+ []== *, значит []! = *. *имеет смысл в любом элементе, кроме template .

Франклин Ю

Answer 5