在離子網格ionic 2中使用文本換行時顯示zic-zac的多行項目

Question

我已經從列表視圖中使用了ion-grid ，並且正在從服務器中獲取數據並將其顯示到列表中，但是當我應用text-wrap它並不能在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>

行高沒有從第二列增加，我需要增加bot列高，並且兩個行高都與動態數據相同。

讓我知道是否有人需要更多細節。

提前致謝！

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>

Answer 2

經過對上述問題的大量搜索和研發，我總結出以下解決方案。

有一個屬性： align-items-end

上面的屬性將您的數據排在行尾，因此不會顯示zic-zac設計，幾乎我可以通過將上述屬性添加到ion-row解決我的問題。

檢查此完整代碼：

<ion-list *ngSwitchCase="'case details'" class="list-style">
      <ion-grid no-padding>
        <ion-row *ngFor="let keyValue of caseDetailsJsonKeyValues; let i = index" align-items-end>
          <ion-col col-6 text-wrap>
            <ion-item class="key-column-remove-padding">
              <ion-label class="key-font-style">{{ keyValue }}</ion-label>
            </ion-item>
          </ion-col>
          <ion-col col-6 text-wrap>
            <ion-item class="value-column-remove-padding">
              <ion-label class="value-font-style">{{ faCaseDetails[keyValue] }}</ion-label>
            </ion-item>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-list>

希望這會幫助其他對ion-list數據有相同問題的人。