イオングリッドイオンでテキストラップを使用しているときにzic-zacを表示している複数の項目2

Question

私はリストビューからion-gridを使用しましたが、サーバからデータを取り出してリストに表示しています。 on ion-list。画面の下に

確認してください：

コード

：

<div class="content-div-style"> 
    <ion-list class="list-style"> 
     <ion-grid no-padding> 
     <ion-row *ngFor="let keyValue of caseDetailsJsonKeyValues"> 
      <ion-col col-6 text-wrap> 
      <ion-item> 
       <ion-label class="key-font-style">{{ keyValue }}</ion-label> 
      </ion-item> 
      </ion-col> 
      <ion-col col-6 text-wrap> 
      <ion-item class="column-remove-padding"> 
       <ion-label class="value-font-style">{{ faCaseDetails.case_details[keyValue] }}</ion-label> 
      </ion-item> 
      </ion-col> 
     </ion-row> 
     </ion-grid> 
    </ion-list> 
    </div> 

行の高さは、私はボットの柱の高さを大きくする必要が2列目から増加していないとの両方の行の高さがしますダイナミックデータと同じである必要があります。

詳細情報が必要な場合は教えてください。

ありがとうございます！

Answer 1

htmlでコンポーネントの構造を変更することはできますか？はいの場合は、試してみてください：

<div class="content-div-style"> 
    <ion-list class="list-style"> 
     <ion-item> 
      <ion-grid no-padding> 
       <ion-row *ngFor="let keyValue of caseDetailsJsonKeyValues"> 
        <ion-col col-6 text-wrap> 
         <ion-label class="key-font-style">{{ keyValue }}</ion-label> 
        </ion-col> 
        <ion-col col-6 text-wrap> 
         <ion-label class="value-font-style">{{ faCaseDetails.case_details[keyValue] }}</ion-label> 
        </ion-col> 
       </ion-row> 
      </ion-grid> 
     </ion-item> 
    </ion-list> 
</div>