Ionic 4 网格 - 每行仅显示一列

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>