30秒学会 Angular 片段 · 2020年3月21日

30秒学会 Angular 片段 – ngIf else

*ngIf directive also supports else statement.

<div *ngIf="isLoading; else notLoading">loading...</div>

<ng-template #notLoading>not loading</ng-template>

file:app.component.ts

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

@Component({
   selector: 'my-app', 
   template: `
<div *ngIf="isLoading; else notLoading">loading...</div>

<ng-template #notLoading>not loading</ng-template>
`,
  },

)
export class AppComponent {
  isLoading = false
}

file:app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

翻译自:https://www.30secondsofcode.org/angular/s/ngif-else