Question

这是我的代码：

<ion-grid no-padding>
    <ion-row *ngFor="let item of items"  let i=index no-padding>
      <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3>
        <ion-card [ngStyle]="{'background': 'url(' + item.PImage + ')'}"> 
          <div *ngIf="item.Ptype == 'cash'" class="cash-cat-icon"></div>
          <div *ngIf="item.Ptype == 'cheque'" class="cheque-cat-icon"></div>   
          <div>
          <h2 item-title >{{item.pName}}</h2>
          <h4 item-title >RS: {{item.PPrice}}</h4>
          </div>
        </ion-card>
      </ion-col>
      <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3>
          <ion-card [ngStyle]="{'background': 'url(' + item.PImage + ')'}"> 
            <div *ngIf="item.Ptype == 'cash'" class="cash-cat-icon"></div>
            <div *ngIf="item.Ptype == 'cheque'" class="cheque-cat-icon"></div>   
            <div>
            <h2 item-title >{{item.pName}}</h2>
            <h4 item-title >RS: {{item.PPrice}}</h4>
            </div>
          </ion-card>
        </ion-col>
    </ion-row>
  </ion-grid>

现在我的数据如下：{name1，name2，name3，name4，name5，name6}

但是在我的屏幕上我会变得像：

name1  name1
name2 name2
name3 name3
name4 name4

但我想要：

name1 name2
name3 name4
name5 name6

请帮帮我。我怎么能实现这个目标！我知道要保留索引但不知道如何在相应的网格中显示这些值

Answer 1

将离子色谱柱包裹在ng-container中，并为仅偶数索引输入条件

 <ion-grid no-padding>
    <ion-row  no-padding *ngFor="let item of items;let i=index">
      <ng-container *ngIf="i % 2 == 0">
      <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i < items.length">
        <ion-card [ngStyle]="{'background': 'url(' + items[i].PImage + ')'}"> 
          <div *ngIf="items[i].Ptype == 'cash'" class="cash-cat-icon"></div>
          <div *ngIf="items[i].Ptype == 'cheque'" class="cheque-cat-icon"></div>   
          <div>
          <h2 item-title >{{items[i].pName}}</h2>
          <h4 item-title >RS: {{items[i].PPrice}}</h4>
          </div>
        </ion-card>
      </ion-col>
      <ion-col col-6 col-sm-3 col-md-6 col-lg-4 col-xl-3 *ngIf="i + 1 < items.length">
       <ion-card [ngStyle]="{'background': 'url(' + items[i+1].PImage + ')'}"> 
          <div *ngIf="items[i+1].Ptype == 'cash'" class="cash-cat-icon"></div>
          <div *ngIf="items[i+1].Ptype == 'cheque'" class="cheque-cat-icon"></div>   
          <div>
          <h2 item-title >{{items[i+1].pName}}</h2>
          <h4 item-title >RS: {{items[i+1].PPrice}}</h4>
          </div>
        </ion-card>
      </ion-col>
      </ng-container>
</ion-row>
</ion-grid>

请检查demo

在网格视图中显示具有索引值的数据

1 个答案: