修复了使用 ionic 4 时列宽不起作用的问题

Question

我正在使用 angular/ionic 4. 我正在尝试对齐标题和所有其他行。标题未与复选框对齐（已确认、已到达、已返回），每行复选框未对齐且标签未保持在单独的行上：

<ion-content>
  <ion-grid>
    <div *ngFor="let customer of customers; let i=index">
      <ion-row *ngIf="customer.admin==true">
        <ion-col>
          <ion-card>
            <ion-card-content text-center text-align: center>
              <b>Shift:</b>&nbsp;{{customer.eventtime}}
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
      <ion-row *ngIf="customer.admin==true">
        <ion-col col-9></ion-col>
        <ion-col col-1>Confirmed</ion-col>
        <ion-col col-1>Arrived</ion-col>
        <ion-col col-1>Returned</ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-9>
          <ion-label *ngIf="customer.admin==true">{{customer.description}}&nbsp;-&nbsp;admin</ion-label>
          <ion-label>{{customer.name}}&nbsp;-&nbsp;{{customer.cellphone}}</ion-label>
        </ion-col>
        <ion-col col-1>
          <ion-checkbox></ion-checkbox>  
        </ion-col>
        <ion-col col-1>
          <ion-checkbox></ion-checkbox>
        </ion-col>
        <ion-col col-1>
          <ion-checkbox></ion-checkbox>
        </ion-col>
      </ion-row>
    </div>
  </ion-grid>
</ion-content>

我搜索了有关设置要修复的列的帮助，但没有找到 ionic 4 示例。

Answer 1

试试这个代码，

 <ion-content>
  <ion-grid>
    <div *ngFor="let customer of customers; let i=index">
      <ion-row *ngIf="customer.admin==true">
        <ion-col>
          <ion-card>
            <ion-card-content text-center text-align: center>
              <b>Shift:</b>&nbsp;{{customer.eventtime}}
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
      <ion-row *ngIf="customer.admin==true">
        <ion-col size="9"></ion-col>
        <ion-col size="1">Confirmed</ion-col>
        <ion-col size="1">Arrived</ion-col>
        <ion-col size="1">Returned</ion-col>
      </ion-row>
      <ion-row>
        <ion-col size="9">
          <ion-label *ngIf="customer.admin==true">{{customer.description}}&nbsp;-&nbsp;admin</ion-label>
          <ion-label>{{customer.name}}&nbsp;-&nbsp;{{customer.cellphone}}</ion-label>
        </ion-col>
        <ion-col size="1">
          <ion-checkbox></ion-checkbox>  
        </ion-col>
        <ion-col size="1">
          <ion-checkbox></ion-checkbox>
        </ion-col>
        <ion-col size="1">
          <ion-checkbox></ion-checkbox>
        </ion-col>
      </ion-row>
    </div>
  </ion-grid>
</ion-content>

修复了使用 ionic 4 时列宽不起作用的问题

Fixed column width not working using ionic 4

ionic-framework

angular

ionic4