Używanie ngIf bez dodatkowego elementu w Angular 2

108

Czy mogę używać ngIfbez dodatkowego pojemnika?

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

Nie działa w tabeli, ponieważ spowodowałoby to nieprawidłowy kod HTML.

html templates angular janispritzkau
źródło

Odpowiedzi:

170

ng-containerjest preferowany nad template:

<ng-container *ngIf="expression">

Widzieć:

Pojemnik kątowy 2 ng

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

Alexander Taylor
źródło

Należy dodać przykładowy fragment kodu HTML „generuj”, aby było jasne, że element HTML <ng-container> nie zostanie utworzony.

Sergey

Znalazłem na to metodę na: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template .

Możesz po prostu użyć <template>tagu i zastąpić go *ngIfw [ngIf]ten sposób.

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

janispritzkau
źródło

dobrze, ale * ngJeśli itslef tworzy templateznacznik, domyślnie przedrostek dyrektyw kątowych z * tworzy znacznik szablonu. więc oba są takie same[ngIf] and *ngIf

Pardeep Jain

Gdy *ngIfmasz element wewnątrz szablonu, nie masz go, jeśli napiszesz templatesiebie. W pewnych okolicznościach dodatkowy element może przeszkadzać.

Teak

Czy możemy umieścić templatetag w środku, tr/ tdtag?

Pankaj Parkar

Tak, to taki szczególny element. Z definicji jest to niedozwolone w3.org/TR/html401/struct/tables.html#h-11.2.3, ale będzie działać i renderować. Jeśli używam * ngIf to nie działa przy okazji. ale z [ngIf] tak. Czy mogę zapytać, czy możesz mi powiedzieć, dlaczego tak jest?

sascha10000

@ sascha10000 Ponieważ posiadanie *ngIf="foo"jest równoważne z <template [ngIf]="foo">tagiem opakowującym . Krótko mówiąc, template+ []== *, więc []! = *. *ma sens w każdym elemencie z wyjątkiem template .

Franklin Yu

Nie możesz umieścić divbezpośrednio w środku tr, to spowodowałoby nieprawidłowy HTML. trmoże zawierać tylko element td/ th/ table, a wewnątrz nich możesz mieć inne elementy HTML.

Możesz nieznacznie zmienić kod HTML, aby mieć *ngFornad sobą tbodyi mieć ngIfnad trsobą, jak poniżej.

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

Pankaj Parkar
źródło

Zasadniczo rozwiązałoby to problem, ale zamienisz podstawową umiejętność, którą otrzymujesz z innymi. Jeśli masz duży stół, możesz naprawić głowę i po prostu przewinąć zawartość. Twoje ciało miałoby rolę tr, a tr miałoby rolę dodatkowego opakowania. Jeśli nie ma potrzeby przewijania i mocowania głowicy u góry, jest to pragmatyczne rozwiązanie. Moje odniesienie do tego, co powiedziałem: w3.org/TR/html401/struct/tables.html#h-11.2.3

sascha10000