Verwenden von ngIf ohne zusätzliches Element in Angular 2

106

Kann ich ngIfohne zusätzliches Containerelement verwenden?

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

In einer Tabelle funktioniert dies nicht, da dies zu ungültigem HTML führen würde.

html templates angular

— janispritzkau
quelle

Antworten:

168

ng-containerwird bevorzugt gegenüber template:

<ng-container *ngIf="expression">

Sehen:

Winkel 2 ng-Behälter

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

— Alexander Taylor
quelle

Sie sollten ein Beispiel für ein HTML-Snippet "generieren" hinzufügen, um zu verdeutlichen, dass kein HTML-Element <ng-container> erstellt wird.

— Sergey

Ich habe eine Methode dafür gefunden: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template .

Sie können einfach die Verwendung <template>Tag und ersetzen *ngIfmit [ngIf]so.

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

— janispritzkau
quelle

gut, aber * ngIf itslef erstellt ein templateTag, standardmäßig erstellt das Präfix eckige Direktiven mit * ein Vorlagen-Tag. also sind beide gleich[ngIf] and *ngIf

— Pardeep Jain

Mit *ngIfSie ein Element in der Vorlage haben, brauchen Sie nicht , wenn Sie das schreiben templateselbst. Unter bestimmten Umständen kann das zusätzliche Element stören.

— Teak

Können wir templatetag in tr/ tdtag einfügen?

— Pankaj Parkar

Ja, es ist ein besonderes Element. Per Definition ist es nicht erlaubt, w3.org/TR/html401/struct/tables.html#h-11.2.3, aber es wird funktionieren und rendern. Wenn ich * ngIf verwende, funktioniert es übrigens nicht. aber mit [ngIf] tut es. Darf ich fragen, ob Sie mir sagen können, warum das so ist?

— Sascha10000

@ sascha10000 Weil das Haben *ngIf="foo"dem Wrapping- <template [ngIf]="foo">Tag entspricht. Kurz gesagt, template+ []== *, also []! = *. *macht in jedem Element außer Sinn template.

— Franklin Yu

Sie können nicht divdirekt hineinstecken tr, das würde ungültiges HTML machen. trkann nur td/ th/ tableelement enthalten & in ihnen könnten andere HTML-Elemente sein.

Sie könnten leicht Ihren HTML ändern müssen *ngForüber tbody& haben ngIfüber trsich unten mögen.

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

— Pankaj Parkar
quelle

Es würde im Grunde das Problem lösen, aber Sie werden die Kernfähigkeit, die Sie mit tbody erhalten, abwägen. Wenn Sie einen großen Tisch haben, können Sie den Kopf reparieren und einfach durch den Körper scrollen. Ihr Körper würde die Rolle von tr haben und tr würde die Rolle eines zusätzlichen Wrappers haben. Wenn Sie nicht scrollen und den Kopf oben fixieren müssen, ist dies eine pragmatische Lösung. Meine Referenz für das, was ich gesagt habe: w3.org/TR/html401/struct/tables.html#h-11.2.3

— sascha10000