Я не могу выбрать курсы в соответствии с категорией - PullRequest
Новая
       30

Я не могу выбрать курсы в соответствии с категорией

0 голосов
/ 19 апреля 2020

Я пытаюсь запустить этот * ngFor = "courses of getCoursesByCategory (Categories.key)", чтобы получить курсы в соответствии с параметром категории. Я не получаю никакой ошибки, но курсы не отображаются. У меня есть база данных, которая выглядит следующим образом Консоль Firebase . Что мне делать?

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();
  }
}

1 Ответ

0 голосов
/ 19 апреля 2020

Сначала измените имя ссылки, так как они одинаковы (категории) 

 <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, я могу помочь вам лучше, если этот подход не поможет

...