Angular 8 ngIf 指令

2024年8月28日 | 1分钟阅读

ngIf 指令用于根据表达式添加或删除 HTML 元素。表达式必须返回一个布尔值。如果表达式为 false，则删除该元素，否则插入该元素。它类似于 AngularJS 的 ng-if 指令。

ngIf 语法

<p *ngIf="condition">
    condition is true and ngIf is true.
</p>
<p *ngIf="!condition">
    condition is false and ngIf is false.
</p>

*ngIf 指令的形式，带有 "else" 块

<div *ngIf="condition; else elseBlock">
Content to render when condition is true.
</div>
<ng-template #elseBlock>
Content to render when condition is false.
</ng-template>

ngIf 指令不会隐藏 DOM 元素。它从 DOM 中删除整个元素及其子树。它还会删除相应的状态，从而释放与该元素关联的资源。

*ngIf 指令最常用于有条件地显示内联模板。请参见以下示例

@Component({
  selector: 'ng-if-simple',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <br>
    <div *ngIf="show">Text to show</div>
`
})
export class NgIfSimple {
  show: boolean = true;
}

带有 else 块的相同模板示例

@Component({
  selector: 'ng-if-else',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <br>
    <div *ngIf="show; else elseBlock">Text to show</div>
    <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
`
})
export class NgIfElse {
  show: boolean = true;
}

下一主题Angular 8 ngFor 指令

Angular 8 ngIf 指令

ngIf 语法

*ngIf 指令的形式，带有 "else" 块

带有 else 块的相同模板示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Angular 8 教程

Angular 其他

Angular + Spring

Angular 8 ngIf 指令

ngIf 语法

*ngIf 指令的形式，带有 "else" 块

带有 else 块的相同模板示例

相关帖子

Angular 8 属性绑定

双向数据绑定

Angular 8 安装

Angular 8 数据绑定

Angular 8 指令

Angular 应用加载

Angular 8 ngFor 指令

Angular 8 字符串插值

Angular 8 特性

如何将 Angular 旧版本升级到 Angular 8

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器