0

我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>

行高不从第二列增加我需要增加机器人列高，并且两个行高都将与每个动态数据相同。

让我知道是否有人需要更多详细信息。

提前致谢！

4

2 回答 2

0

是否可以更改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>
于 2017-12-14T07:39:57.253 回答
0

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

有一个属性：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数据问题的人。

于 2019-03-20T09:55:58.117 回答