如何在 Angular 期获得一条记录?
How can I get one record in Angular issue?
我要获取我的数据库的一条记录,现在我犯了一个小错误。不知道怎么才能上记录。我已经成功地从我的后端获取了记录,并且我有 console.log 来显示我得到的值。让我分享我的代码。
我有两个页面,第一页是显示所有书籍的首页,这里显示所有书籍没有问题
问题出在这里,在我的图书详情页面。我不知道如何在单击书的书名时只显示一本书,我已经看到我得到了后端响应的值,但我不知道如何在我的书的详细信息页面上显示它。我不知道 getOneBook 订阅
图书详情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>
bookdetail 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'?
这是为了获取后台的响应,请看图
data.service
家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.");
});
}
根据您的 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>
我要获取我的数据库的一条记录,现在我犯了一个小错误。不知道怎么才能上记录。我已经成功地从我的后端获取了记录,并且我有 console.log 来显示我得到的值。让我分享我的代码。
我有两个页面,第一页是显示所有书籍的首页,这里显示所有书籍没有问题
问题出在这里,在我的图书详情页面。我不知道如何在单击书的书名时只显示一本书,我已经看到我得到了后端响应的值,但我不知道如何在我的书的详细信息页面上显示它。我不知道 getOneBook 订阅
图书详情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>
bookdetail 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'?
这是为了获取后台的响应,请看图 data.service
家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.");
});
}
根据您的 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>