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：无法读取未定义的属性'reduce'

我认为这与我在构造函数中编写的.subscribe有关，这只表示coursesFiltered仍然没有数据。

我如何确定它并解决此问题？

谢谢

Answer 1

我认为在设置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>

自定义管道角度，TypeError：无法读取undefined的属性'reduce'

2 个答案: