angular6.0開發教程:angular6.0資料迴圈*ngFor、if判斷
阿新 • • 發佈:2019-02-11
前面我們介紹了angular6.0的單向資料繫結和雙向資料繫結,這都是angular的資料傳遞。本章我們接著來介紹其它的資料傳遞方式:資料迴圈、if判斷、繫結點選事件。
1:angular6.0資料迴圈
先在home.component.ts檔案中新增一個數組:
hero = [ { id:1, name:'gaogao' }, { id:2, name:'wanlimm' }, { id:3, name:'ssmay' }, { id:4, name:'angular '} ];
然後在home.component.html檔案中迴圈呼叫,程式碼如下:
<div> <li *ngFor="let v of hero"> {{ v.name }} </li> </div>
這裡的hero就是上面定義的hero陣列,*ngFor就是angular6.0的迴圈指令,就像php的foreach迴圈一樣,每迴圈一次,把hero的一個元素賦值給v,然後,通過v.name輸出。
2:angular6.0的if判斷。
接著上面的程式碼繼續。我們不想讓陣列中的id=2的元素顯示,程式碼如下:
<div> <li *ngFor="let v of hero"> <span *ngIf="v.id != 2">{{ v.name }}</span> </li> </div>
這裡用到了angular6.0的 *ngIf指令。如果 v.id != 2 時,就顯示。也就是排除了id=2的陣列元素,即陣列中的wanlimm不會顯示出來。