angular - 我如何使用 "*ngIf else"？

Question

我正在使用 Angular，我想在这个例子中使用 *ngIf else(从版本 4 开始可用):

<div *ngIf="isValid">
  content here ...
</div>

<div *ngIf="!isValid">
 other content here...
</div>

如何使用 ngIf else 实现相同的行为？

Answer 1

Angular 4 和 5:

使用 else :

<div *ngIf="isValid;else other_content">
    content here ...
</div>

<ng-template #other_content>other content here...</ng-template>

您还可以使用 then else :

<div *ngIf="isValid;then content else other_content">here is ignored</div>
<ng-template #content>content here...</ng-template>
<ng-template #other_content>other content here...</ng-template>

或then独自一人:

<div *ngIf="isValid;then content"></div>
<ng-template #content>content here...</ng-template>

演示:

Plunker

详细信息:

<ng-template> : 是 Angular 自己对 <template> 的实现标签是 according to MDN :

The HTML <template> element is a mechanism for holding client-sidecontent that is not to be rendered when a page is loaded but maysubsequently be instantiated during runtime using JavaScript.