自定义管道角度，类型错误：无法读取未定义的属性“减少”

Question

我正在从 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 管道是我从这个线程中获得的自定义管道： How to group data in Angular 2?

这是什么：

    @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] }));
  }
  }  
}

但不幸的是，我最终遇到了问题 TypeError：无法读取未定义的属性“减少”

我相信这与我在构造函数中编写的 .subscribe 有关，这仅意味着 courseFiltered 仍然没有数据。

我怎样才能确保它确实如此并解决这个问题？

谢谢

Answer 1

我认为在设置 coursesFiltered 之前进行评估时失败。也许将 coursesFiltered 初始化为一个空数组。

this.coursesFiltered: any[] = [];

Answer 2

在您的管道中，您可以简单地对其进行测试：

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>