【问题标题】: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
      • 我使用了你的答案并添加了一件事,因此我同意你使用你的答案。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-09-16
      • 2023-03-28
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多