Auto-insert <ion-list-divider> *ngFor 中值的变化
Auto-insert <ion-list-divider> on change of value in *ngFor
我有一个 JSON objects 的数组。像这样:
[
{ 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 },
]
在我的模板中,我设置了一个 *ngFor 循环来显示每个项目。像这样:
<ion-list>
<ion-item *ngFor="let toDo of listOfToDos">
<ion-label> {{ toDo.details }} - {{ toDo.project }} </ion-label>
</ion-item>
</ion-list>
结果是一堆ion-items。凉爽的。我已按项目顺序对数组进行排序。
我想做的是插入一个header、break 或其他什么,每次toDo.project
的值从[=16= 中的第n 项变为第n+1 项时] 环形。结果输出将是:
早上
穿好衣服
倒麦片
通勤
开车上班
...
有趣
写代码
我不知道有多少项目(sub-divisions 个项目)。
我考虑过构建一个独特项目的列表,然后嵌套 *ngFor 这样的东西:
*ngFor="let project of projects"
*ngFor="toDo of toDos"
*ngIf="toDo.project ===project"
但这似乎效率不高。有没有更优雅的方法来做到这一点?
谢谢大家
保罗
勾选这个linkhttps://stackblitz.com/edit/ionic-dpwyqc?file=pages%2Fhome%2Fhome.ts
将此添加到 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>
将此添加到 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;
}, {}
);
}
我有一个 JSON objects 的数组。像这样:
[
{ 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 },
]
在我的模板中,我设置了一个 *ngFor 循环来显示每个项目。像这样:
<ion-list>
<ion-item *ngFor="let toDo of listOfToDos">
<ion-label> {{ toDo.details }} - {{ toDo.project }} </ion-label>
</ion-item>
</ion-list>
结果是一堆ion-items。凉爽的。我已按项目顺序对数组进行排序。
我想做的是插入一个header、break 或其他什么,每次toDo.project
的值从[=16= 中的第n 项变为第n+1 项时] 环形。结果输出将是:
早上
穿好衣服
倒麦片
通勤
开车上班
...
有趣
写代码
我不知道有多少项目(sub-divisions 个项目)。
我考虑过构建一个独特项目的列表,然后嵌套 *ngFor 这样的东西:
*ngFor="let project of projects"
*ngFor="toDo of toDos"
*ngIf="toDo.project ===project"
但这似乎效率不高。有没有更优雅的方法来做到这一点?
谢谢大家
保罗
勾选这个linkhttps://stackblitz.com/edit/ionic-dpwyqc?file=pages%2Fhome%2Fhome.ts
将此添加到 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>
将此添加到 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;
}, {}
);
}