how to access array inside an object and the array itself contain objects in angular?

**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.sstatic.net/OO81T.png