如何在 Angular 期获得一条记录？

Question

我要获取我的数据库的一条记录，现在我犯了一个小错误。不知道怎么才能上记录。我已经成功地从我的后端获取了记录，并且我有 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.");
      });
  }

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>

如何在 Angular 期获得一条记录？

How can I get one record in Angular issue?

node.js

angular

typescript

angular-services

mongodb-atlas