Angular9示例:使用*ngIf&else 进行条件渲染

分享于 

3分钟阅读

Angular

  繁體

在这个示例中,看到如何使用Angular 9中的*ngIf指令条件渲染组件或HTML元素。

什么是条件渲染?

条件渲染意味着仅当条件满足时,元素才插入到DOM中。

Angular提供*ngIf指令,允许你在Angular模板中有条件地渲染元素。

用一个简单的例子来看一下。

打开项目中的src/app/app.component.ts文件定义一个displayElement的新类变量,并给它一个初始值false:


import { Component } from '@angular/core';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})

export class AppComponent {
 displayElement = false;
}

接下来,打开src/app/app.component.html文件,并按如下方式更新它:


<div>
 <p *ngIf="displayElement">Magic element!</p>
</div>

在这种情况下,<p>元素及它内容将不会渲染在DOM中,因为使用false值应用了*ngIf指令

else块

就像典型的编程语言一样,*ngIf指令可以有一个else块,如果主块中定义的语句是false,则显示该块。

返回到src/app/app.component.html文件,并按如下方式更新它:


<div>
 <!-- notActive is a reference to else -->
 <p *ngIf="displayElement; else showThis">Magic element!</p>
 <ng-template #showThis> 
 Another magic element!
 </ng-template>
</div>

这里,使用else showThis*ngIf指令来提供一个部分模板,如果<p>元素被渲染,

else块必须是ng-template

另外一个例子

打开src/app/app.component.html文件,并用下面的代码替换内容:


<input [(ngModel)]="showContent" type="checkbox"/> Show My Secret Message

<hr />

<div *ngIf="showContent; else message">
 Hello Angular 9!
</div>

<ng-template #message>
 Click the checkbox above to read the secret message!
</ng-template>

这将呈现一个复选框,然后单击上方的复选框以阅读消息!


相关文章