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>