ionic4學習筆記12-某東項目柵格完成商品列表

1、頁面代碼

<div class="h_title">
    商品列表
  </div>
  <!--

    柵格系統12列
    size="6":表示每行有2列；
    
  -->
  <div class="plist">
    <ion-grid>
      <ion-row>
        <ion-col size="6" *ngFor="let item of pList">
          <img [src]="item.pic" />
          <p>{{item.title}}</p>
        </ion-col>      
      </ion-row>
    </ion-grid>
  </div>

2、數據來源

     2.1 圖片已放在了assets/文件夾下

     2.2 ts數據

//商品列表
  public pList:any[]=[];
 //商品列表
    for(var i=1;i<=12;i++){
      this.pList.push({
        pic:'assets/list'+i+'.jpg',
        title:'第'+i+'個',
      })
    }