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

【问题标题】：Multiline item showing zic-zac while using text-wrap in ion-grid ionic 2在 ion-grid ionic 2 中使用文本换行时显示 zic-zac 的多行项目
【发布时间】：2019-03-20 17:55:58
【问题描述】：

我在列表视图中使用了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>

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

如果有人需要更多详细信息，请告诉我。

提前致谢！

【问题讨论】：

标签： ionic2 ion-list ion-grid

【解决方案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>

【讨论】：

所以在我的情况下也需要分隔线，否则一切都很好
Divider 将在那里，它将来自ion-list。当你尝试上面的代码时出了什么问题。

【解决方案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 数据问题的人。

【讨论】：