Question

目前我正在尝试创建一个包含多个数据字段的简单列表。我选择网格而不是简单的离子列表的原因是我有多个数据字段，我想要标题排列。每行应该是一个可点击的细节，然后通过.push（）命令将您带到另一个页面。由于在网格开始之后的离子网格或离子项之后没有直接的样式，因此列标题不与列数据对齐。如果我将标题部分设为按钮离子项，它们会匹配。有没有办法解决这个问题？或者我是否必须在离子行对象上重新创建按钮样式？

<ion-grid>
  <ion-row align-items-start>
   <ion-col width-10 text-left no-border no-padding>Work Order</ion-col>
   <ion-col width-10 text-left no-border no-padding>Line</ion-col>
   <ion-col width-10 text-left no-border no-padding>Job Code</ion-col>
   <ion-col width-10 text-left no-border no-padding>Vehicle</ion-col>
   <ion-col width-25 text-left no-border no-padding>Description</ion-col>
   <ion-col width-10 text-left no-border no-padding>Time</ion-col>
   <ion-col width-10 text-left no-border no-padding>Code</ion-col>
   <ion-col width-10 text-left no-border no-padding>Repair Type</ion-col>
 </ion-row>



 <button ion-item no-margin *ngFor="let job of jobs" ngDefaultControl no-border no-padding>
  <ion-row align-items-start>
   <ion-col width-10 text-left no-border no-padding>{{job.wo}}</ion-col>
   <ion-col width-10 text-left no-border no-padding>{{job.lineNumber}}</ion-col> 
   <ion-col width-10 text-left no-border no-padding>{{job.vmrs_maj}} - {{job.vmrs_int}} - {{job.vmrs_min}}</ion-col>
   <ion-col width-10 text-left no-border no-padding>{{job.vehicle}}</ion-col>
   <ion-col width-25 text-left no-border no-padding>{{job.description}}</ion-col>
   <ion-col width-10 text-left no-border no-padding>{{job.hoursWorked}}:{{job.minutesWorked}}</ion-col>
   <ion-col width-10 text-left no-border no-padding>{{job.completionCode}}</ion-col>
   <ion-col width-10 text-left no-border no-padding>{{job.repairType}}</ion-col>

  </ion-row>
 </button>



</ion-grid>

Answer 1

离子网格由12列组成，您可以使用col-12作为列的属性使其跨越整行。您只有12列可供选择所以你可以有2个col-6,3 col-4,4，col-3 6 col-2 12 col-1，或者像col-4，col-8这样两个列的一些组合，它们将占用1/3 ，分别为2/3。全部涵盖here

离子2网格标题没有排列列数据

1 个答案: