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列增加我需要增加机器人列高度，并且两个行高度将与每个动态数据相同。

如果有人需要更多细节，请告诉我。

提前致谢！

Answer 1

是否可以在html中更改组件的结构？如果是，请尝试：

# Sample data
set.seed(2017);
df <- cbind.data.frame(
    course_name = rep(LETTERS[1:6], each = 2),
    value = sample(300, 12),
    variable = rep(c("total_enrolled", "total_capacity"), length.out = 12)
);

# Relevel factor levels, ordered by subset(df, variable == "total_enrolled")$value
df$course_name <- factor(
    df$course_name,
    levels = as.character(subset(df, variable == "total_enrolled")$course_name[order(subset(df, variable == "total_enrolled")$value)]));

# Plot
require(ggplot2);
g <- ggplot(df, aes(x = course_name, y = value))
g <- g + geom_bar(aes(fill = variable), position = position_dodge(), stat = "identity");
g <- g + coord_flip() + theme(legend.position = "top");
g <- g + labs(x = "Course Name")
g <- g + labs(y = "Number of Students")
g;

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数据有相同问题的其他人。

在离子网格离子2

2 个答案: