1
現在複数のデータフィールドを持つ単純なリストを作成しようとしています。私が単純なイオンリストの代わりにグリッドを選択したのは、ヘッダーを整列させたいという複数のデータフィールドがあるからです。各行はクリック可能なディテールでなければなりません。これにより、.push（）コマンドで別のページに移動します。グリッドの開始後にイオングリッドまたはイオンアイテムの直後に何もないスタイリングのため、列ヘッダーは列データと整列しません。ヘッダーセクションをボタンアイテムにすると、マッチアップします。これを回避する方法はありますか？または、イオン列オブジェクトのボタンスタイルを基本的に再作成する必要がありますか？イオン2グリッドヘッダーが列データで整列していない
<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>