如果从未满足某个条件，如何显示某个HTML(Angular)

Question

假设我有一个围绕ngIf语句的ngFor循环

<ng-container *ngFor="let item of items">
<ng-container *ngIf="condition1">
//display table1
</ng-container>
</ng-container>

现在，假设我有第二个表(称之为表2(，如果表1没有显示，我想显示它。

<ng-container *ngIf="condition1 was never met and table1 is not displayed">
//display table2
<ng-container>

最好的方法是什么？有没有一种方法可以使用Angular的数据绑定功能来实现这一点？或者，你能给我指一个正确的方向吗？

Answer 1

您可以使用标准的Angular ngIf，否则如下👇

<ng-container
*ngIf="condition1; then table1; else table2">
</ng-container>
<ng-template #table1>
<div>
table1
</div>
</ng-template>
<ng-template #table2>
<div>
table2
</div>
</ng-template>

你可以在这个帖子上阅读更多关于它的信息

Answer 2

您可以使用ng模板和ngIf else

<ng-container *ngFor="let item of items">
<ng-container *ngIf="condition1;else table2">
//display table1
</ng-container>
</ng-container>
<ng-template #table2> //display table2 </ng-template>

或

<ng-container *ngFor="let item of items">
<ng-container *ngIf="condition1;then table1 else table2"> </ng-container>
</ng-container>
<ng-template #table1> //display table1 </ng-template>
<ng-template #table2> //display table2 </ng-template>