如何使用* ngIf else？
如何使用* ngIf else？
我正在使用Angular，我希望*ngIf else在此示例中使用（自版本4起可用）：
<div *ngIf="isValid"> content here ...</div><div *ngIf="!isValid"> other content here...</div>
我怎样才能实现同样的行为ngIf else？
翻翻过去那场雪浏览 3469回答 3
3回答
-
收到一只叮咚
角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>标签实现，根据MDN：HTML <template>元素是一种用于保存客户端内容的机制，该内容在加载页面时不会呈现，但随后可以在运行时使用JavaScript进行实例化。 -
扬帆大鱼
在Angular 4.xx中 您可以以四种方式使用ngIf来实现简单的if else过程：只需使用If<div *ngIf="isValid"> If isValid is true</div>使用If with Else（请注意templateName）<div *ngIf="isValid; else templateName"> If isValid is true</div><ng-template #templateName> If isValid is false</ng-template>使用If with Then（请注意templateName）<div *ngIf="isValid; then templateName"> Here is never showing</div><ng-template #templateName> If isValid is true</ng-template>使用If with Then和Else<div *ngIf="isValid; then thenTemplateName else elseTemplateName"> Here is never showing</div><ng-template #thenTemplateName> If isValid is true</ng-template><ng-template #elseTemplateName> If isValid is false</ng-template>提示：ngIf计算表达式，然后 在表达式分别为truthy或falsy时将then或else模板呈现在其位置。通常是：然后 template是ngIf的内联模板，除非绑定到不同的值。除非绑定，否则else模板为空。 -
Cats萌萌
为了使用observable，如果可观察数组由数据组成，我通常会这样做。<div *ngIf="(observable$ | async) as listOfObject else emptyList"> <div > .... </div></div> <ng-template #emptyList> <div > ... </div></ng-template>
随时随地看视频慕课网APP
相关分类
AngularJS