4 Angular-系統指令、自定義指令ngFor

1 代碼結構

 

 2 myc03.component.ts

 1 import { Component, OnInit } from '@angular/core';
 2 
 3 @Component({
 4   selector: 'app-myc03',
 5   templateUrl: './myc03.component.html',
 6   styleUrls: ['./myc03.component.css']
 7 })
 8 export class Myc03Component implements OnInit {
 9 
10   names = ["劉備", '諸葛亮', '關羽', '張飛', '趙雲']
11 
12   constructor() { }
13 
14   ngOnInit(): void {
15   }
16 
17 }

3 myc03.component.html

 1 <p>myc03 works!</p>
 2 
 3 <ul>
 4     <li *ngFor="let item of names">{{item}}</li>
 5 </ul>
 6 
 7 <!--帶有序號的for循環-->
 8 <ul>
 9     <!--i序號-->
10     <li *ngFor="let item of names; let i =index">
11         <b>{{i}}.</b>
12         <span>{{item}}</span>
13     </li>
14 </ul>

4 效果圖