Ionic4 learning notes 12 - a east project grid completes the list of goods

1、 Page code

<div class="h_title">
     List of goods 
  </div>
  <!--

     grid system 12 Column 
    size="6": Indicates that each line has 2 Column ;
    
  -->
  <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、 Data sources

     2.1 The picture has been placed in assets/ Under the folder

     2.2 ts data

// List of goods 
  public pList:any[]=[];
 // List of goods 
    for(var i=1;i<=12;i++){
      this.pList.push({
        pic:'assets/list'+i+'.jpg',
        title:' The first '+i+' individual ',
      })
    }