Angular按类别获取课程无显示问题求助

我来帮你排查下这个问题——你遇到的情况是模板里调用getCoursesByCategory方法过滤课程，但没报错却看不到内容，主要有几个常见原因和对应的解决办法：

一、核心问题分析 #

1. 异步数据加载时机不匹配
   你的courses和categories都是通过Firebase异步获取的，初始渲染模板时courses还未赋值（是undefined），这时候调用filter方法其实会隐式报错（可能你没注意控制台），导致没有数据返回。等数据加载完成后，虽然变量更新了，但模板的变更检测可能没有正确触发重新渲染，或者方法调用的逻辑在初始阶段已经“失效”了。

2. 模板中直接调用方法的性能与变更检测问题
   Angular的变更检测会在每次事件循环（比如用户交互、定时器、异步请求完成）时调用模板里的方法，频繁调用filter不仅会影响性能，还可能因为数据状态的频繁变化导致渲染不稳定。

二、最优解决方案：提前分组数据（推荐） #

与其在模板里动态过滤，不如在数据加载完成后直接把课程按类别分组好，这样模板只需要遍历预处理好的数据即可，既解决显示问题，又提升性能。

步骤1：修改Component代码 #

首先在组件里新增一个变量来存储“类别+对应课程”的组合数据，然后在订阅数据时完成分组：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CategoryService } from 'src/app/modules/common/services/category.service';
import { CourseService } from '../../services/course.service';
import { mergeMap, map } from 'rxjs/operators';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.css']
})
export class CoursesComponent implements OnInit, OnDestroy {
  categories: any[];
  courses: any[];
  // 新增：存储类别与对应课程的组合数据
  categoryWithCourses: any[];
  sub: Subscription;

  constructor(private categoryService : CategoryService, private courseService : CourseService) { }

  ngOnInit() {
    this.sub = this.categoryService.getAllcategories()
      .pipe(
        mergeMap(categories => this.courseService.getAllCourses().pipe(
          map(courses => [categories, courses])
        ))).subscribe(([categories, courses]) => {
          this.categories = categories;
          this.courses = courses;
          // 核心：按类别分组课程
          this.categoryWithCourses = categories.map(category => ({
            ...category,
            courses: courses.filter(course => course.category === category.key)
          }));
        });
  }

  ngOnDestroy() : void {
    this.sub.unsubscribe();
  }
}

步骤2：修改模板代码 #

直接遍历预分组好的categoryWithCourses，不用再调用方法：

<mat-tab-group>
  <mat-tab *ngFor="let category of categoryWithCourses" [label]="category.label">
    <div class="cardList">
      <ng-container *ngFor="let course of category.courses">
        <mat-card class="cardListItem">
          <mat-card-header>
            <div mat-card-avatar class="example-header-image"></div>
            <mat-card-title>{{ course.title }}</mat-card-title>
          </mat-card-header>
          <img mat-card-image [src]="course.urlImage">
          <mat-card-content>
            <p>{{ course.description }}</p>
          </mat-card-content>
          <mat-card-actions>
            <button mat-flat-button color="primary">Add Course</button>
          </mat-card-actions>
        </mat-card>
      </ng-container>
    </div>
  </mat-tab>
</mat-tab-group>

三、备选临时解决方案：处理初始值 #

如果你暂时不想修改数据结构，可以先给courses初始化一个空数组，避免初始调用filter时出错：

// 在组件里初始化courses为空数组
courses: any[] = [];

这样模板初次渲染时，getCoursesByCategory会返回空数组，等数据加载完成后，courses更新，变更检测会重新调用方法渲染课程。不过这个方法还是存在频繁调用filter的性能问题，所以还是推荐第一种方案。

四、额外检查点 #

别忘了确认Firebase返回的数据结构：确保course.category和category.key的类型完全一致（比如都是字符串或都是数字），如果类型不匹配，filter会返回空数组，自然看不到课程。

内容的提问来源于stack exchange，提问作者user13321892