在Angular中,可以使用groupBy
管道对数组进行分组。下面是一个示例解决方法:
groupBy
:import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'groupBy'
})
export class GroupByPipe implements PipeTransform {
transform(value: any[], key: string): any {
const groupedObj = value.reduce((prev, cur) => {
if (!prev[cur[key]]) {
prev[cur[key]] = [cur];
} else {
prev[cur[key]].push(cur);
}
return prev;
}, {});
return Object.keys(groupedObj).map(key => ({ key, value: groupedObj[key] }));
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GroupByPipe } from './group-by.pipe';
@NgModule({
imports: [BrowserModule],
declarations: [GroupByPipe],
bootstrap: [AppComponent]
})
export class AppModule { }
groupBy
管道对数组进行分组:
{{ group.key }}
-
{{ item.name }}
在上面的示例中,myArray
是要分组的数组,category
是用来分组的属性。
这样就可以使用groupBy
管道对数组进行分组并在模板中显示了。