2 Angular-系統指令、自定義指令ngIf

1 項目結構

 2 myc01.component.ts

 1 import { Component, OnInit } from '@angular/core';
 2 
 3 @Component({
 4   selector: 'app-myc01',
 5   templateUrl: './myc01.component.html',
 6   styleUrls: ['./myc01.component.css']
 7 })
 8 export class Myc01Component implements OnInit {
 9 
10   score = 50;
11 
12   constructor() { }
13 
14   ngOnInit(): void {
15   }
16 
17 }

 

3 myc01.component.html

 1 <p>myc01 works!</p>
 2 <h3>成績：{{score}}</h3>
 3 <div *ngIf="score>=90">優秀</div>
 4 <div *ngIf="score<90&&score>=70">良好</div>
 5 <div *ngIf="score>=60&&score<70">及格</div>
 6 <button (click)="score=score+5">更改成績</button>
 7 
 8 <!--if-else-->
 9 <ng-container *ngIf="score>=60;else elseTemplate">
10     <b>及格</b>
11 </ng-container>
12 <!--ng提供的快速標記方式，類似於id='唯一標識' 簡化成 #唯一標識-->
13 <ng-template #elseTemplate>
14     <b>不及格</b>
15 </ng-template>

 

4 效果