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

108

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

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

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

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

Ответы:

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 .
Франклин Ю
4

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

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

<tbody *ngFor="...">
  <tr *ngIf="...">
    ...
  </tr>
  <tr  *ngIf="!...">
    ...
  </tr>
  ..
</tbody>
Панкадж Паркар
источник
Это в основном решило бы проблему, но вы обменяете основные способности с телом. Если у вас большой стол, вы можете починить голову или просто прокрутить тело. Ваш tbody будет иметь роль tr, а tr - роль дополнительной оболочки. Если нет необходимости прокручивать и фиксировать голову вверху, это прагматичное решение. Моя ссылка на то, что я сказал: w3.org/TR/html401/struct/tables.html#h-11.2.3
sascha10000