Menggunakan ngIf tanpa elemen tambahan di Angular 2

107

Bisakah saya menggunakan ngIftanpa elemen kontainer tambahan?

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

Itu tidak berfungsi dalam tabel karena itu akan membuat HTML tidak valid.

html templates angular janispritzkau.dll
sumber

Jawaban:

21

Saya menemukan metode untuk itu di: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template .

Anda cukup menggunakan <template>tag dan menggantinya *ngIfdengan [ngIf]seperti ini.

<template [ngIf]="...">
  ...
</template>
janispritzkau.dll
sumber
bagus tapi * ngIf itslef membuat templatetag, secara default prefiks angular directives dengan * membuat tag template. jadi keduanya sama[ngIf] and *ngIf
Pardeep Jain
1
Dengan *ngIfAnda memiliki elemen di dalam template, Anda tidak dapat menulisnya templatesendiri. Dalam keadaan tertentu, elemen tambahan dapat mengganggu.
Jati
Bisakah kita meletakkan templatetag di dalam, tr/ tdtag?
Pankaj Parkar
Ya, itu semacam elemen khusus. Menurut definisi, ini tidak diperbolehkan w3.org/TR/html401/struct/tables.html#h-11.2.3 tetapi akan berfungsi dan dirender. Jika saya menggunakan * ngJika tidak berfungsi btw. tapi dengan [ngIf] ya. Bolehkah saya bertanya apakah Anda dapat memberi tahu saya mengapa demikian?
sascha10000
1
@ sascha10000 Karena memiliki *ngIf="foo"setara dengan <template [ngIf]="foo">tag pembungkus . Singkatnya, template+ []== *, jadi []! = *. *masuk akal dalam elemen apa pun kecuali template .
Franklin Yu
4

Anda tidak dapat memasukkan divlangsung ke dalam tr, itu akan membuat HTML tidak valid. trhanya dapat memiliki td/ th/ tableelemen di dalamnya & di dalamnya Anda dapat memiliki elemen HTML lainnya.

Anda bisa sedikit mengubah HTML Anda untuk memiliki *ngForlebih tbody& memiliki ngIflebih tritu sendiri seperti di bawah ini.

<tbody *ngFor="...">
  <tr *ngIf="...">
    ...
  </tr>
  <tr  *ngIf="!...">
    ...
  </tr>
  ..
</tbody>
Pankaj Parkar
sumber
Ini pada dasarnya akan menyelesaikan masalah tetapi Anda akan menukar kemampuan inti yang Anda dapatkan dengan tbody. Jika Anda memiliki meja besar, Anda dapat memperbaiki kepala dengan hanya menggulir tubuh. Tubuh Anda akan memiliki peran tr dan tr akan memiliki peran sebagai pembungkus tambahan. Jika tidak perlu menggulir dan memperbaiki kepala di atas, ini adalah solusi pragmatis. Referensi saya untuk apa yang saya katakan: w3.org/TR/html401/struct/tables.html#h-11.2.3
sascha10000