我如何才能在Angular杂志上获得一张唱片

Question

我要得到数据库的一条记录，现在我只是犯了一个小错误。我不知道我怎么能只记录在案。我已经成功地从后台获取了记录，我有console.log来显示我获得的值。让我分享我的代码。

我有两页，第一页是显示所有书籍的主页，这里显示所有书籍没有问题

问题就在这里，在我的书的详细页面上。我不知道当我点击书的书名时，我怎么能只显示一本书，我已经看到我得到了后端响应值，但我不知道如何在我的书详细信息页面上显示它。我不知道getOneBook订阅

bookdetail html

<h1>Book-detail</h1>
<div *ngIf="book" class="bookdetail-block">
<div *ngFor="let bookdetail of book" 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>

书籍详情ts

export class BookDetailComponent implements OnInit {
isbn: any;
book: any;
constructor(private data: DataService, private router: Router, private route: ActivatedRoute) { }
ngOnInit() {
this.route.snapshot.paramMap.get("isbn");
this.data.getOneBook(this.isbn).subscribe(data =>{
console.log({ data });  //show data
this.book = data
//console.log(this.books);
})
}
getBookDetail(books) {
this.data.getOneBook(books.isbn); //isbn of book
}
}

这里的错误

ERROR in src/app/bookdetail/bookdetail.component.ts(16,35): error TS2551: Property 'subscribe' does not exist on type 'Subscription'. Did you mean 'unsubscribe'?

这是为了从后端获得响应，请查看图片数据服务

主页html

<h1>All Books</h1>
<ul *ngIf="books" class="info">
<li *ngFor="let book of books">
<p><img [src]="book.image" class="bookimg"></p>
<a routerLink="/bookdetail/{{book.isbn}}" (click)="getBookisbn(book)"><h3>{{ book.title }}</h3></a>
<p>{{ "By "+ book.author }}</p>
<span class="price-block" >{{ "HKD$ " + book.price}}</span>
<div class="btn-fav">
<p>
<button>Add to favorite</button>
</p>
</div>
<div class="btn-cart">
<p>
<button>Add to cart</button>
</p>
</div>
</li>
</ul>

主页ts

export class HomeComponent 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);
})
}
// object of book
getBookisbn(book) {
this.data.getOneBook(book.isbn)   //isbn of book
//this.router.navigateByUrl("bookdetail/" + book.isbn)
}

data.service.ts

export class DataService {

constructor(private http: HttpClient) { }
getBooks() {
return this.http.get('http://localhost:10888/book');
}
getOneBook(isbn:any) {
// console.log("=============" + isbn )
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.");
});
}

Answer 1

根据您的Service:

getOneBook接受1个参数，即isbn

所以当你呼叫它(订阅(时，你应该使用

this.data.getOneBook(this.isbn)

而不是

this.data.getOneBook(this.books)

我假设您将isbn作为parameter包含在激活的路由中，因此在这种情况下，您可以尝试以下代码：

//import { ActivatedRoute, Router } from "@angular/router";  
export class BookDetailComponent implements OnInit {
isbn: number;
book: any;
constructor(private data: DataService,
private router: Router,
private route: ActivatedRoute
) {}
ngOnInit() {
this.isbn = this.route.snapshot.paramMap.get("isbn");
this.data.getOneBook(this.isbn).subscribe(data =>{
this.book = data
})
}
}

注意我也用this.book替换了this.books。

在您的家庭组件HTML 中

更换

<a routerLink="/bookdetail/{{book.isbn}}" (click)="getBookisbn(book)"><h3>{{ book.title }}</h3></a>

带

<a [routerLink]="['/bookdetail/', book.isbn]"><h3>{{ book.title }}</h3></a>