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 效果