如何在Angular中使用* ngIf else？ [英] How to use *ngIf else in Angular?

问题描述

我正在使用Angular，我希望在此示例中使用 * ngIf else （自版本4起可用）：

I'm using Angular and I want to use *ngIf else (available since version 4) in this example:

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

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

如何使用 ngIf else ？

推荐答案

Angular 4 and 5 ：

使用 else ：

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

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

您还可以使用然后：

<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>

或然后单独：

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

演示：

Plunker

详细信息：

< ng-template> ：是Angular自己的根据< template> 标记模板rel =noreferrer> MDN ：

<ng-template>: is Angular’s own implementation of the <template> tag which is according to MDN :

HTML < template> element是一种机制，用于保存客户端
内容，当加载页面时不会呈现该内容，但随后可以使用JavaScript在运行时实例化
。

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

这篇关于如何在Angular中使用* ngIf else？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！