angular 7的ngif指令 angular7的ngif指令|Angular7教程

本文概述

例子
* ngIf指令具有其他条件

例子component.ts文件：

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-server2', templateUrl: './server2.component.html', styleUrls: ['./server2.component.css'] }) export class Server2Component implements OnInit { allowNewServer = false; serverCreationStatus = 'No server is created.'; serverName = 'TestServer'; serverCreated = false; /*constructor() { setTimeout(() =>{ this.allowNewServer = true; }, 5000); }*/ngOnInit() { } onCreateServer() { this.serverCreated = true; this.serverCreationStatus = 'Server is created. Name of the server is' + this.serverName; } OnUpdateServerName(event: Event) { this.serverName = (< HTMLInputElement>event.target).value; } }

component.html文件：

< p> Server2 is also working fine. < /p>< label>Server Name< /label> < !--< input type="text" class="form-control" (input)="OnUpdateServerName($event)">--> < input type="text" class="form-control" [(ngModel)]="serverName"> < !--< p>{{serverName}}< /p>--> < button class="btn btn-primary" [disabled]="allowNewServer" (click)="onCreateServer()">Add Server< /button> < p *ngIf="serverCreated"> Server is created. Server name is {{serverName}}< /p>

输出：
输出将如下所示。

文章图片
当我们更改输入值并单击“添加服务器”按钮时，你将看到以下结果：

文章图片
你可以在上面的示例中看到，通过使用* ngIf指令，我们可以更改条件以相应地显示输出。
你可以在添加服务器之前和之后检查输出的视图源。你会清楚地看到差异。
【angular 7的ngif指令】在添加服务器之前：

文章图片
添加服务器后：

文章图片
因此，你可以看到结构化指令如何更改DOM。
* ngIf指令具有其他条件你还可以通过* ngIf指令使用Else条件。如果* ngIf不为真，则用于显示输出。让我们在component.html文件中进行一些更改。
component.html文件：

< p *ngIf="serverCreated; else noServer"> Server is created. Server name is {{serverName}}< /p> < ng-template #noServer> < p>No Server is created.< /p> < /ng-template>

输出：

文章图片
单击“添加服务器”按钮后：

文章图片
你还可以使用否定（！）符号检查其反向大小写。

< p *ngIf="!serverCreated; else noServer"> Server is created. Server name is {{serverName}}< /p> < ng-template #noServer> < p>No Server is created.< /p> < /ng-template>