Angualr 访问远程 API (2)

在上一篇文章中，我们了解了如何模拟远程服务接口，并通过访问远程接口检索图书信息。

本文将继续介绍如何实现 CRUD 中的其他三个操作：创建（C）、更新（U）和删除（D）操作。

创建操作

首先，我门在图书列表中增加一本图书。

1. 在 BookService 中，添加一个方法，接受图书名称作为参数，返回 Book 类型的 Observable.

src/app/books/book.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import { Book } from './book.model';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class BookService {

  private booksUrl = 'api/books/'

  constructor(private http: HttpClient) { }

  // Get all books
  getBooks(): Observable<Book[]> {
    return this.http.get<Book[]>(this.booksUrl);
  }

  // Create a new book
  createBook(name: string): Observable<Book> {
    const book = { name };
    return this.http.post<Book>(this.booksUrl, book);
  }
}

2. 在组件类 BookListComponent 中，创建一个 add 方法，接受图书名称作为参数。该方法订阅 BookService 的 createBook 方法，将其返回的图书信息，添加到图书列表中。

src/app/books/book-list/book-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Book } from '../book.model';
import { BookService } from '../book.service';

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrls: ['./book-list.component.css']
})
export class BookListComponent implements OnInit {

  books: Book[];

  constructor(private bookService: BookService) {
  }

  ngOnInit(): void {
    this.getBooks();
  }

  // Get all books.
  private getBooks() {
    this.bookService.getBooks().subscribe(books => this.books = books);
  }

  // Add a new book.
  add(name: string) {
    this.bookService.createBook(name).subscribe(book => this.books.push(book));
  }

}

3. 修改组件模板文件 book-list.component.html，放置一个添加图书的按钮。

src/app/books/book-list/book-list.component.html

<h3>科幻图书</h3>
<ul>
  <li *ngFor="let book of books">{{book.name}}</li>
</ul>
<div>
  <button (click)="add('《球状闪电》')">添加《球状闪电》</button>
</div>

更新操作

然后，我门修改一本现有图书的名称。

1. 在 BookService 中，添加一个方法，接受图书的id和实例对象作为参数，返回 any 类型的 Observable.

src/app/books/book.service.ts

...

@Injectable({
  providedIn: 'root'
})
export class BookService {

...

  // Edit an existing book
  editBook(id: number, book: Book): Observable<any> {
    return this.http.put(this.booksUrl + id, book);
  }
}

2. 在组件类 BookListComponent 中，创建一个 rename 方法，接受图书实例对象作为参数。该方法订阅 BookService 的 editBook 方法，在其成功执行后，修改指定 id 图书的名称。

src/app/books/book-list/book-list.component.ts

...

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrls: ['./book-list.component.css']
})
export class BookListComponent implements OnInit {

...

  // rename a book's name
  rename(book: Book) {
    const existingBook = { id: book.id, name: '《叁体》', price: 50.00};
    this.bookService.editBook(book.id, existingBook).subscribe(() => {
      this.books.find(book => book.id).name = "《叁体》";
    });
  }

}

3. 修改组件模板文件 book-list.component.html，放置一个重命名图书的按钮。

src/app/books/book-list/book-list.component.html

...
<div>
  <button (click)="rename(books[0])">重命名<三体>为<叁体></button>
</div>

删除操作

然后，我门删除一本现有图书。

1. 在 BookService 中，添加一个方法，接受图书的id作为参数，返回 any 类型的 Observable.

src/app/books/book.service.ts

...

@Injectable({
  providedIn: 'root'
})
export class BookService {

...

  // Delete an existing book
  deleteBook(id: number): Observable<any> {
    return this.http.delete(this.booksUrl + id);
  }
}

2. 在组件类 BookListComponent 中，创建一个 remove 方法，接受图书的id作为参数。该方法订阅 BookService 的 deleteBook 方法，在其成功执行后，从图书列表中移除指定 id 图书。

src/app/books/book-list/book-list.component.ts

...

@Component({
  selector: 'app-book-list',
  templateUrl: './book-list.component.html',
  styleUrls: ['./book-list.component.css']
})
export class BookListComponent implements OnInit {

...

  remove(book: Book) {
    this.bookService.deleteBook(book.id).subscribe(()=>{
      this.books = this.books.filter(selected => selected !== book);
    });
  }

}

3. 修改组件模板文件 book-list.component.html，放置一个删除图书的按钮。

src/app/books/book-list/book-list.component.html

...
<div>
  <button (click)="remove(books[2])">删除《死神永生》</button>
</div>