Question

我正在尝试与我一起创建离子网格，以便动态地创建列，

就像这样但动态地

  <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>

Answer 1

这里在工作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文件

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
    }]

Answer 2

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

您只需要增加尺寸即可。列的大小取决于您，但要记住一行有12列，以便您可以根据需要自行管理。

带2根柱子的动态离子网

2 个答案: