在 ion-grid 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>

行高未从第 2 列开始增加我需要增加 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

经过对上述问题的大量搜索和研发，我总结出以下解决方案。

There is one property : 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 数据方面遇到同样问题的人。

在 ion-grid ionic 2 中使用文本换行时显示 zic-zac 的多行项目

Multiline item showing zic-zac while using text-wrap in ion-grid ionic 2

ionic2

ion-list

ion-grid