Значение ключа меняется

Question

Моя база данных Firebase выглядит так: .

Итак, что я пытаюсь сделать в файле html, так это то, что сначала при использовании <mat-tab *ngFor="let cat of categories" [label]="cat.label"> я отображаю панель вкладок, которая позволяет мне переключаться между различными категориями. Как видно из базы данных, есть три ключа категорий: backend, frontend и bigdata. При выполнении <p>{{ cat.key }}</p> выводится текущая категория выполнения, которая является правильной .

Затем через <ng-container *ngFor="let co of getCoursesByCategory(cat.key)"> Я пытаюсь выбрать курсы, категория которых соответствует категории, выполняемой в настоящее время используя функцию. Но когда функция выполняется, и я пытаюсь записать значение пройденного ключа, я не получаю одно и то же значение, вместо этого категория всех курсов регистрируется на консоли три раза. Я думаю, что это означает, что он загружает все курсы для каждого ключа категории. .

Почему на консоли отображается не только значение ключа, которое я прошел, и почему отображается категория каждого курса? Почему это происходит? Как я могу отфильтровать курсы по категории? Я просто хочу, чтобы курсы с категорией внешнего интерфейса отображались на вкладке внешнего интерфейса, базовые - на вкладке внутреннего интерфейса, а большие - на вкладке больших данных.

courses.component. html: -

<mat-tab-group>
    <mat-tab *ngFor="let cat of categories" [label]="cat.label">
        <div class="cardList">
            <p>{{ cat.key }}</p>
            <hr>
            <ng-container *ngFor="let co of getCoursesByCategory(cat.key)">
                    <p>{{ co.category }}</p>
            </ng-container>
        </div>
    </mat-tab>
</mat-tab-group>

course.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: any)
  {
      console.log(key);
      return this.courses.filter(course => course.category == key)
  }

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

}