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

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

将 ion-col 包装在 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