我正在学习 Angular 2。我正在使用 Angular 2 构建一个简单的 CRUD 应用程序。我遇到了一个问题，插入记录后，表在客户端没有刷新，但是，它正在插入数据库中。但是如果我重新加载网页，它正在更新记录，但如果我添加新记录、更新记录或删除记录，则不会更新或刷新表。我的代码有什么问题？
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
app.component.html
<app-book></app-book>
book.component.ts
import {Component, OnInit, Output, EventEmitter} from '@angular/core';
import {BookService} from './book.service';
import {Book} from './book';
@Component({
selector: 'app-book',
templateUrl: './book.component.html'
})
export class BookComponent implements OnInit{
books: Book[];
statusMessage: string;
book = new Book();
constructor(private _bookService: BookService){}
ngOnInit(): void {
console.log("calling ngOnInit()::::");
this.getBooks();
}
getBooks(): void{
console.log("Inside getBooks():::::")
this._bookService.getAllBooks()
.subscribe((bookData) => this.books = bookData,
(error) =>{
console.log(error);
this.statusMessage = "Problem with service. Please try again later!";
});
console.log("end of getBooks():::::")
}
addBook(): void{
console.log("inside the addBook()::::::")
this._bookService.addBook(this.book)
.subscribe((bookData) => {console.log(bookData); this.books.push(bookData)},
(error) =>{
console.log(error);
this.statusMessage = "Problem with service. Please try again later!";
});
this.getBooks();
this.reset();
console.log("end of addBook()::::");
}
updateBook(bookId: string){
console.log("Inside the updateBook()::::::Book id::::"+bookId);
this._bookService.getBookById(bookId)
.subscribe((bookData) => this.book = bookData),
(error) => {
console.log(error);
this.statusMessage = "Problem with service. Please try again later!";
}
this.getBooks();
console.log("end of updateBook()::::::");
}
deleteBook(bookId: string){
console.log("Inside the deleteBook()::::Book id::::"+bookId);
this._bookService.deleteBook(bookId)
.subscribe((response) => console.log(response),
(error) =>{
console.log(error);
this.statusMessage = "Problem with service. Please try again later!";
});
this.getBooks();
this.reset();
console.log("end of deleteBook():::::::");
}
private reset(){
console.log("inside the reset():::::::");
this.book.title = null;
this.book.author = null;
console.log("end of reset():::::::");
}
}
即使我尝试在 addBook()、deleteBook()、updateBook() 的末尾调用 this.getBooks() 方法，但它仍然没有刷新或更新。只有当我们重新加载网页时它才会更新或刷新。
book.component.html
<div>
<form>
<input type = "hidden" [(ngModel)] = "book.id" name = "id" />
<label>Book Title</label>
<input type = "text" [(ngModel)] = "book.title" name = "title"/><br/>
<label>Book Author</label>
<input type = "text" [(ngModel)] = "book.author" name = "author"/><br/>
<button (click) = "addBook()">Add Book</button>
</form>
</div>
<div>
<table border = "1">
<tr>
<td>Id</td>
<td>Title</td>
<td>Author</td>
<td>Actions</td>
</tr>
<tr *ngFor = "let book of books">
<td>{{book.id}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
<td>
<button (click) = "updateBook(book.id)">Edit</button>
<button (click) = "deleteBook(book.id)">Delete</button>
</td>
</tr>
</table>
</div>
book.service.ts
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Book } from './book';
@Injectable()
export class BookService{
constructor(private _httpService: Http){}
getAllBooks(): Observable<Book[]>{
return this._httpService.get("http://localhost:8037/spring-mvc-restfull-crud-example/book")
.map((response: Response) => response.json())
.catch(this.handleError);
}
getBookById(bookId: string): Observable<Book>{
console.log("Inside the getBookById() service::::::");
return this._httpService.get("http://localhost:8037/spring-mvc-restfull-crud-example/book/"+bookId)
.map((response: Response) => response.json())
.catch(this.handleError);
}
addBook(book: Book){
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
if(book.id){
console.log("Inside addBook update service():::::::");
return this._httpService.put("http://localhost:8037/spring-mvc-restfull-crud-example/book/"+book.id, JSON.stringify(book), options);
}else{
console.log("Inside addBook add service():::::::body:::::::"+JSON.stringify(book));
return this._httpService.post("http://localhost:8037/spring-mvc-restfull-crud-example/book", JSON.stringify(book), options);
}
}
deleteBook(bookId: string){
console.log("Inside the service deleteBook():::::book id:::"+bookId);
return this._httpService.delete("http://localhost:8037/spring-mvc-restfull-crud-example/book/"+bookId);
}
private handleError(error: Response){
console.error(error);
return Observable.throw(error);
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BookService } from './book/book.service';
import { BookComponent } from './book/book.component';
@NgModule({
declarations: [
AppComponent, BookComponent
],
imports: [
BrowserModule, HttpModule, FormsModule
],
providers: [BookService],
bootstrap: [AppComponent]
})
export class AppModule { }
我的代码有什么问题？或者怎么做？提前致谢：）