[英]Auto-insert <ion-list-divider> on change of value in *ngFor
I have an array of JSON objects.我有一个 JSON 对象数组。 Something like this:像这样的东西:
[
{ details: 'get dressed', project: 'morning', importance: 'volcanic' },
{ details: 'pour cheerios, project: 'morning', importance: 'medium' },
{ details: 'drive to work', project: 'commute', importance: 'high' },
...
{ details: 'write code', project: 'fun', importance: 'medium },
]
In my template, I have an *ngFor loop set up to show each item.在我的模板中,我设置了一个 *ngFor 循环来显示每个项目。 Something like this:像这样的东西:
<ion-list>
<ion-item *ngFor="let toDo of listOfToDos">
<ion-label> {{ toDo.details }} - {{ toDo.project }} </ion-label>
</ion-item>
</ion-list>
and the result is a bunch of ion-items.结果是一堆离子项目。 Cool.凉爽的。 I have sorted the array in order of project.我已按项目顺序对数组进行了排序。
What I want to do is to insert a header, break, or whatever, each time the value of toDo.project
changes from item n to item n+1 in the *ngFor
loop.我想要做的是插入 header、break 或其他任何内容,每次toDo.project
的值在*ngFor
循环中从项目 n 更改为项目 n+1 时。 The resulting output would be:生成的 output 将是:
Morning早晨
get dressed穿好衣服
pour cheerios倒干杯
Commute通勤
drive to work开车上班
... ...
Fun乐趣
Write code编写代码
I do not know ahead of time how many projects (sub-divisions of the list) there are.我不知道有多少项目(列表的子部分)。
I considered building a list of unique projects and then nesting *ngFor something like this:我考虑构建一个独特项目的列表,然后嵌套 *ngFor 类似这样的东西:
*ngFor="let project of projects"
*ngFor="toDo of toDos"
*ngIf="toDo.project ===project"
But this seems inefficient.但这似乎效率低下。 Is there a more elegant way to do this?有没有更优雅的方法来做到这一点?
Thanks all.谢谢大家。
Paul保罗
Check this link https://stackblitz.com/edit/ionic-dpwyqc?file=pages%2Fhome%2Fhome.ts检查此链接https://stackblitz.com/edit/ionic-dpwyqc?file=pages%2Fhome%2Fhome.ts
Add this in html file
在html file
中添加这个
<ion-list>
<ng-container *ngFor="let item of data">
<ion-item-divider>
<ion-label>
{{item[0]}}
</ion-label>
</ion-item-divider>
<ion-item *ngFor="let item_sub of item[1]">
<ion-label> {{ item_sub?.details }}</ion-label>
</ion-item>
</ng-container>
</ion-list>
Add this in ts file
在ts file
中添加这个
public data: any = [
{ details: 'get dressed', project: 'morning', importance: 'volcanic' },
{ details: 'pour cheerios', project: 'morning', importance: 'medium' },
{ details: 'drive to work', project: 'commute', importance: 'high' },
{ details: 'write code', project: 'fun', importance: 'medium' },
];
constructor() {
let getData = this.groupMethod(this.data, 'project');
this.data = Object.entries(getData);
}
groupMethod(array, fn) {
return array.reduce(
(acc, current) => {
const groupName = typeof fn === 'string' ? current[fn] : fn(current);
(acc[groupName] = acc[groupName] || []).push(current);
return acc;
}, {}
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.