Ionic 4 grid - 每行只显示一列

Question

我想在下方显示“Shift”列并让它占据整行。但是，其他列 'admindesc' 出现在它的旁边。如何保持 'Shift' 单独一行的列？

<ion-content>
  <ion-grid>
    <ion-row *ngFor="let customer of customers; let i=index">
      <ion-col *ngIf="customer.admin==true">
        <ion-card>
          <ion-card-content>
            Shift: {{customer.status}}
          </ion-card-content>
        </ion-card>
      </ion-col>
      <ion-col>
        <ion-label *ngIf="customer.admin==true">{{customer.admindesc}}admin</ion-label>
        {{customer.fullname}}-{{customer.cellphone}}--{{customer.admin}}
      </ion-col>
      <ion-col>
        <ion-checkbox></ion-checkbox>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Answer 1

您可以将 for 循环的结构指令放在 <div *ngFor='...'> 中，这样您的代码看起来就像这样。这将在整个迭代过程中将您的 shift 列放在它自己的一行中，并将其他内容放在第二行中。

<ion-content>
  <ion-grid>
    <div *ngFor="let customer of customers; let i=index">
      <ion-row>
        <ion-col *ngIf="customer.admin==true">
         <ion-card>
           <ion-card-content>
             Shift: {{customer.status}}
           </ion-card-content>
         </ion-card>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <ion-label *ngIf="customer.admin==true">{{customer.admindesc}}admin</ion-label>
            {{customer.fullname}}-{{customer.cellphone}}--{{customer.admin}}
        </ion-col>
        <ion-col>
          <ion-checkbox></ion-checkbox>
        </ion-col>
      </ion-row>
    </div>
  </ion-grid>
</ion-content>

Ionic 4 grid - 每行只显示一列

Ionic 4 grid - displaying only one column per row

ionic-framework

angular

ionic4