**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>$</span>{{doc.price}}</del></p>
<a href="#" class="btn btn-primary text-center" routerLink="/web">Start Course</a>
</div>
</div>
</div>
</div>
</ng-container>
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>$</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>$</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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.