Encountering a dilemma when attempting to retrieve a single record from an array like this
data.service.ts
getOneBookDetail(isbn:any) {
const headers = new HttpHeaders().set("Content-Type", "application/json");
// console.log("=============" + isbn )
console.log(headers)
return this.http.get('http://localhost:10888/bookdetail/?isbn='+ isbn).subscribe(
(val) => { // Get has no error and response has body
console.log("Get successful value returned in body", val);
},
response => {
console.log("Get call in error", response);
},
() => { // Get has no error, response has no body
console.log("The Get observable is now completed.");
});
}
home.component.ts
getBookDetail(book) {
this.data.getOneBookDetail(book.isbn) //isbn of book
}
and I can click the title of book
<a routerLink="/bookdetail/{{book.isbn}}" (click)="getBookDetail(book)"><h3>{{ book.title }}</h3></a>
and I can get a object I saw it in console
Get successful value returned in body [{…}]
0: {_id: "5fc91e5aa700213eb8c52de0", title: "A Promised Land"
[{…}] is 0: {_id: "5fc91e5aa700213eb8c52de0", title: "A Promised Land" ....
but I want to display only this specific book on a page named bookdetail, instead of all books currently being shown.
Below is the bookdetail component:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-bookdetail',
templateUrl: './bookdetail.component.html',
styleUrls: ['./bookdetail.component.scss']
})
export class BookDetailComponent implements OnInit {
h1Style: boolean = false;
books: Object;
constructor(private data: DataService) {}
ngOnInit() {
this.data.getBooks().subscribe(data=> {
console.log({data}) //show data
this.books = data
//console.log(this.books);
})
}
}
in bookdetail html
<h1>Book-detail</h1>
<div *ngIf="books" class="bookdetail-block">
<div *ngFor="let bookdetail of books" class="bookdetail">
<h1>{{bookdetail.title}}</h1>
<p><img [src]="bookdetail.image" ></p>
<p>{{bookdetail.author}}</p>
<p>{{bookdetail.price}}</p>
<p>{{bookdetail.isbn}}</p>
<p>{{bookdetail.description}}</p>
</div>
</div>
How do I only display the selected book?
I suspect the issue lies within the bookdetail ngOnInit() function??