Custom Pipe Angular, TypeError: Cannot read property 'reduce' of undefined
Custom Pipe Angular, TypeError: Cannot read property 'reduce' of undefined
我是这样从 Firebase 数据库中获取课程的:
this.fetchItems()
.subscribe((res) => {
this.coursesFiltered = res.filter((filtered: any) => {
return filtered.courseStatus === 2 || filtered.courseStatus === 3
});
});
函数 fetchItems()
fetchItems() {
return this.afDB.list('courses', (ref) => ref.orderByChild('courseSemCode'))
.snapshotChanges()
.map((arr) => {
return arr.map((snap: any) => {
return snap.status = snap.payload.val();
});
});
}
然后我想按 courseSemCode 对它们进行分组,以便它在卡片中正确显示
<ion-card *ngFor="let item of coursesFiltered | groupBy:'courseSemCode'">
<ion-card-header>
<h6>{{item.courseSemester + " " + item.courseYear}}</h6>
</ion-card-header>
<ion-card-content>
<ion-list>
<button ion-button class="text" class="btnCourse">
{{item.courseName}}
</button>
</ion-list>
</ion-card-content>
</ion-card>
groupBy 管道是我从该线程获得的自定义管道:
这是哪个:
@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
transform(value: Array<any>, field: string): Array<any>
{
if(!value || !value.length) {
return value;
}else{
const groupedObj = value.reduce((prev, cur)=> {
if(!prev[cur[field]]) {
prev[cur[field]] = [cur];
} else {
prev[cur[field]].push(cur);
}
return prev;
}, {});
return Object.keys(groupedObj).map(key => ({ key, value: groupedObj[key] }));
}
}
}
但不幸的是最后我遇到了问题
类型错误:无法读取未定义的 属性 'reduce'
我认为这与我在构造函数中编写的 .subscribe 有关,这仅意味着 coursesFiltered 仍然没有数据。
我怎样才能确保它确实存在并解决这个问题?
谢谢
我认为它在设置 coursesFiltered 之前进行评估时失败了。也许将 coursesFiltered 初始化为一个空数组。
this.coursesFiltered: any[] = [];
在你的管道中,你可以简单地测试它:
transform(value: any, args?: any) {
if(!value || !value.length) { return value; }
return value.reduce(...);
}
编辑 在你的循环中你这样做
*ngFor="let item of coursesFiltered | groupBy:'courseSemCode'"
但是分组数组的结构是这样的
[{key: 'your key', value: [...]}]
这意味着你必须做两个循环:
<ion-card *ngFor="let group of coursesFiltered | groupBy:'courseSemCode'">
<ng-container *ngFor="let item of group.value">
<ion-card-header>
<h6>{{item.courseSemester + " " + item.courseYear}}</h6>
</ion-card-header>
<ion-card-content>
<ion-list>
<button ion-button class="text" class="btnCourse">
{{item.courseName}}
</button>
</ion-list>
</ion-card-content>
</ng-container>
</ion-card>
我是这样从 Firebase 数据库中获取课程的:
this.fetchItems()
.subscribe((res) => {
this.coursesFiltered = res.filter((filtered: any) => {
return filtered.courseStatus === 2 || filtered.courseStatus === 3
});
});
函数 fetchItems()
fetchItems() {
return this.afDB.list('courses', (ref) => ref.orderByChild('courseSemCode'))
.snapshotChanges()
.map((arr) => {
return arr.map((snap: any) => {
return snap.status = snap.payload.val();
});
});
}
然后我想按 courseSemCode 对它们进行分组,以便它在卡片中正确显示
<ion-card *ngFor="let item of coursesFiltered | groupBy:'courseSemCode'">
<ion-card-header>
<h6>{{item.courseSemester + " " + item.courseYear}}</h6>
</ion-card-header>
<ion-card-content>
<ion-list>
<button ion-button class="text" class="btnCourse">
{{item.courseName}}
</button>
</ion-list>
</ion-card-content>
</ion-card>
groupBy 管道是我从该线程获得的自定义管道:
这是哪个:
@Pipe({name: 'groupBy'})
export class GroupByPipe implements PipeTransform {
transform(value: Array<any>, field: string): Array<any>
{
if(!value || !value.length) {
return value;
}else{
const groupedObj = value.reduce((prev, cur)=> {
if(!prev[cur[field]]) {
prev[cur[field]] = [cur];
} else {
prev[cur[field]].push(cur);
}
return prev;
}, {});
return Object.keys(groupedObj).map(key => ({ key, value: groupedObj[key] }));
}
}
}
但不幸的是最后我遇到了问题 类型错误:无法读取未定义的 属性 'reduce'
我认为这与我在构造函数中编写的 .subscribe 有关,这仅意味着 coursesFiltered 仍然没有数据。
我怎样才能确保它确实存在并解决这个问题?
谢谢
我认为它在设置 coursesFiltered 之前进行评估时失败了。也许将 coursesFiltered 初始化为一个空数组。
this.coursesFiltered: any[] = [];
在你的管道中,你可以简单地测试它:
transform(value: any, args?: any) {
if(!value || !value.length) { return value; }
return value.reduce(...);
}
编辑 在你的循环中你这样做
*ngFor="let item of coursesFiltered | groupBy:'courseSemCode'"
但是分组数组的结构是这样的
[{key: 'your key', value: [...]}]
这意味着你必须做两个循环:
<ion-card *ngFor="let group of coursesFiltered | groupBy:'courseSemCode'">
<ng-container *ngFor="let item of group.value">
<ion-card-header>
<h6>{{item.courseSemester + " " + item.courseYear}}</h6>
</ion-card-header>
<ion-card-content>
<ion-list>
<button ion-button class="text" class="btnCourse">
{{item.courseName}}
</button>
</ion-list>
</ion-card-content>
</ng-container>
</ion-card>