我在列表视图中使用了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列增加我需要增加机器人列高度,并且两个行高度将与每个动态数据相同。
如果有人需要更多细节,请告诉我。
提前致谢!
答案 0 :(得分:0)
是否可以在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;
答案 1 :(得分: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
数据有相同问题的其他人。