我无法根据类别获取课程

Question

我正在尝试运行此 *ngFor="courses of getCoursesByCategory(categories.key)" 以根据类别参数获取课程。我没有收到任何错误，但没有显示课程。我有一个看起来像这样Firebase Console 的数据库。我该怎么办？

courses.component.html:-

<mat-tab-group>
    <mat-tab *ngFor="let categories of categories" [label]="categories.label">
        <div class="cardList">
            <ng-container *ngFor="let courses of getCoursesByCategory(categories.key)">
                <mat-card class="cardListItem">
                    <mat-card-header>
                        <div mat-card-avatar class="example-header-image"></div>
                        <mat-card-title>{{ courses.title }}</mat-card-title>
                    </mat-card-header>
                    <img mat-card-image [src]="courses.urlImage">
                    <mat-card-content>
                        <p>{{ courses.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.component.ts:-

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

  getCoursesByCategory(key)
  {
      return this.courses.filter(course => course.category==key);
  }

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

Answer 1

首先更改参考名称，因为两者相同（类别）

 <mat-tab *ngFor="let category of categories" [label]="category.label">

将所有类别替换为其他元素中的类别。

而不是<ng-container *ngFor="let courses of getCoursesByCategory(categories.key)">

使用<ng-container *ngFor="let courses of category ">

现在课程将包含类别元素。

如果你能提供json，如果这种方法没有帮助，我可以更好地帮助你