如何访问对象内部的数组并且数组本身包含有角度的对象？

Question

**I am trying to print the detail of Courses in the DOM but i am getting an error. I want to print the detail of courses which is shown in the below image. **

This is the service file which is fetching the data from the 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;
    }))
  }
}

In this component i call the service and console log the file which is shown in image below.

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

}
}

This my template file in 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

You do not need the first *ngFor as the category is an object. Since you only need the courses array contained within the category variable, you could directly loop over by using *ngFor="let doc of category.courses" . Try the following

<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> 

However if you also wish to retrieve properties other than courses from the category object, then you could use 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>