как получить доступ к массиву внутри объекта и сам массив содержит объекты в angular?

Question

** Я пытаюсь распечатать детали курсов в DOM, но получаю ошибку. Я хочу напечатать детали курсов, которые показаны на изображении ниже. **

Это служебный файл, который извлекает данные из API.

services.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Category } from '../models/category.model';
import {map} from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class ServicesService {
  category:Category[]=[];
 uri:string='https://localhost:44347/api';
  constructor(private http:HttpClient) { }

  public fetchCategory(categoryId){
    return this.http.get<Category[]>(`${this.uri}/Categories/${categoryId}`).pipe(map((data: Category[]) => {
      return this.category = data;
    }))
  }
}

В этом компонент, который я называю службой, и консоль регистрируют файл, который показан на изображении ниже.

webdev.component.ts

import { Component, OnInit } from '@angular/core';
import { NavService } from 'src/app/shared/nav.service';
import {NavbarComponent} from '../../navbar/navbar.component';
import { Observable, pipe } from 'rxjs';
import { Category } from 'src/app/models/category.model';
import { ServicesService } from 'src/app/shared/services.service';
import {map} from 'rxjs/operators';
@Component({
  selector: 'app-webdev',
  templateUrl: './webdev.component.html',
  styleUrls: ['./webdev.component.css']
})
export class WebdevComponent implements OnInit {
  category=[];
  constructor(private nav:NavService, private service:ServicesService) { }

  ngOnInit(): void {
      this.service.fetchCategory(1).subscribe((cat:Category[])=>{
        this.category=cat;
        console.log(this.category);
      })

}
}

Это мой файл шаблона в angular. webdev.component. html

<ng-container  class="cntr">
   <div *ngFor="let docc of category; let i=index" class="cntr">
      <div *ngFor="let doc of docc.courses">
 <div class="card text-center" style="width: 18rem;">
    <img src="{{docc.imageUrl}}" class="card-img-top w-50 m-auto" alt="HTML5">
   <div class="card-body">
     <h5 class="card-title text-center">{{doc.courseName}}</h5>
     <p class="card-text text-center">{{doc.courseDescription}}</p>
      <p class="class-text font-weight-bold"><del><span>&#36;</span>{{doc.price}}</del></p>
     <a href="#" class="btn btn-primary text-center" routerLink="/web">Start Course</a>
   </div>
 </div>
 </div>
</div>
 </ng-container> 

https://i.imgur.com/XFERDUA.png

Answer 1

Вам не нужен первый *ngFor, поскольку category является объектом. Так как вам нужен только массив courses, содержащийся в переменной category, вы можете напрямую l oop использовать *ngFor="let doc of category.courses". Попробуйте выполнить следующее:

<ng-container *ngIf="category" class="cntr">
  <div *ngFor="let doc of category.courses">
    <div class="card text-center" style="width: 18rem;">
      <img src="{{docc.imageUrl}}" class="card-img-top w-50 m-auto" alt="HTML5">
      <div class="card-body">
        <h5 class="card-title text-center">{{doc.courseName}}</h5>
        <p class="card-text text-center">{{doc.courseDescription}}</p>
        <p class="class-text font-weight-bold"><del><span>&#36;</span>{{doc.price}}</del></p>
        <a href="#" class="btn btn-primary text-center" routerLink="/web">Start Course</a>
      </div>
    </div>
  </div>
</ng-container> 

Однако, если вы также получите sh для извлечения свойств, отличных от courses, из объекта category, вы можете использовать keyvalue pipe.

<ng-container *ngIf="category" class="cntr">
  <div *ngFor="let cat of category | keyvalue">
    <ng-container *ngIf="cat.key !== 'courses';else courses>
      <p>{{cat.key}}: {{cat.value}}</p>
    </ng-container>
    <ng-template #courses>
      <div *ngFor="let doc of cat.value">
        <div class="card text-center" style="width: 18rem;">
          <img src="{{docc.imageUrl}}" class="card-img-top w-50 m-auto" alt="HTML5">
          <div class="card-body">
            <h5 class="card-title text-center">{{doc.courseName}}</h5>
            <p class="card-text text-center">{{doc.courseDescription}}</p>
            <p class="class-text font-weight-bold"><del><span>&#36;</span>{{doc.price}}</del></p>
            <a href="#" class="btn btn-primary text-center" routerLink="/web">Start Course</a>
          </div>
        </div>
      </div>
    </ng-template>
  </div>
</ng-container>