Tôi có thể sử dụng ngIfmà không có phần tử vùng chứa phụ không?
<tr *ngFor="...">
<div *ngIf="...">
...
</div>
<div *ngIf="!...">
...
</div>
</tr>Nó không hoạt động trong một bảng vì điều đó sẽ làm cho HTML không hợp lệ.
Tôi có thể sử dụng ngIfmà không có phần tử vùng chứa phụ không?
<tr *ngFor="...">
<div *ngIf="...">
...
</div>
<div *ngIf="!...">
...
</div>
</tr>Nó không hoạt động trong một bảng vì điều đó sẽ làm cho HTML không hợp lệ.
Câu trả lời:
ng-containerđược ưu tiên hơn template:
<ng-container *ngIf="expression">Xem:
Tôi đã tìm thấy một phương pháp cho điều đó trên: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template .
Bạn chỉ cần sử dụng <template>thẻ và thay thế *ngIfbằng thẻ [ngIf]như thế này.
<template [ngIf]="...">
...
</template>templatethẻ, theo mặc định, tiền tố chỉ thị góc với * sẽ tạo thẻ mẫu. vì vậy cả hai đều giống nhau[ngIf] and *ngIf
*ngIfbạn có một phần tử bên trong mẫu, nếu bạn tự viết phần tử thì không template. Trong một số trường hợp, yếu tố phụ có thể can thiệp.
templatethẻ bên trong, tr/ tdthẻ không?
*ngIf="foo"tương đương với <template [ngIf]="foo">thẻ gói . Tóm lại, template+ []== *, vì vậy []! = *. *có ý nghĩa trong bất kỳ phần tử nào ngoại trừ template .
Bạn không thể đặt divtrực tiếp vào bên trong tr, điều đó sẽ làm cho HTML không hợp lệ. trchỉ có thể có td/ th/ tablephần tử trong đó và bên trong chúng, bạn có thể có các phần tử HTML khác.
Bạn có thể thay đổi một chút HTML của mình để có *ngForhơn tbodyvà có ngIfhơn trchính nó như bên dưới.
<tbody *ngFor="...">
<tr *ngIf="...">
...
</tr>
<tr *ngIf="!...">
...
</tr>
..
</tbody>