具有 2 列的动态离子网格答案

【问题标题】：Dynamic ion-grid with 2 columns具有 2 列的动态离子网格
【发布时间】：2020-01-08 04:25:30
【问题描述】：

我正在尝试与我一起创建离子网格，只是为了动态列，

就像这样，但动态地

  <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

【解决方案1】：

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

这里正在工作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
    }]

【讨论】：

感谢您的回复，但我只想显示 2 列，其余数据转到下一行
嘿！我用你的答案。只是为了解释。我希望你不介意。如果你想删除我的ans，那么我会这样做。 @ORBIT
你为什么那样做。我的努力怎么样，你为什么不投票，并删除问题@HassanAli
我使用了你的答案并添加了一件事，因此我同意你使用你的答案。