ionic-framework - Dynamic ion-grid with 2 columns

Question

i'm trying to create ion-grid with me just to columns dynamically,

just like this but dynamically

  <ion-grid fixed >
      <ion-row>
       <ion-col > 1</ion-col>
       <ion-col > 2</ion-col>
      </ion-row>

      <ion-row>
       <ion-col > 3</ion-col>
       <ion-col > 4</ion-col>
      </ion-row>
    </ion-grid>

标签： ionic-framework

Answer 1

Here is working Example

   <ion-grid fixed >
      <ion-row *ngFor="let cus of customer; let i = index">
       <ion-col>{{ cus.name }}</ion-col>
       <ion-col >  <img [src]="cus.image"  class="imgCardMain" /></ion-col>
      </ion-row>
   </ion-grid>

.ts file

imgaddress="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAHQAxwMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAEBQMGAAECBwj/xAA6EAACAQMDAgQDBwMDBAMB";


    customer = [{
        "name" : "Alfreds Futterkiste",
        "city" : "Berlin",
        "image" : this.imgaddress,
        "price":10
    },{
        "name" : "Alfreds Futterkiste",
        "city" : "Berlin",
        "image" :this.imgaddress,
         "price":10
    },{
        "name" : "Alfreds Futterkiste",
        "city" : "Berlin",
        "image" : this.imgaddress,
         "price":10
    },{
        "name" : "Alfreds Futterkiste",
        "city" : "Berlin",
        "image" : this.imgaddress,
         "price":10
    }]