Angular 2 更新数据库中的记录后视图未更新
Angular 2 view not updating after I update a record in the database
我有一个使用 Angular 的简单 CRUD 应用程序 2. 主页显示用户可以创建、编辑或删除的卡片列表。
在卡片编辑页面,当我点击提交时,它调用:
卡-edit.component.ts
onSubmit() {
this.updateCard(this.card);
alert("Card updated!");
this._router.navigate(['/CardList']);
}
updateCard(updatedCard: Card) {
// call to card.service.ts
this._cardService.updateCard(updatedCard)
.subscribe(
result => this.response = result,
error => this.errorMessage = <any>error);
}
card.service.ts
updateCard(updatedCard: Card): Observable<string> {
let body = JSON.stringify(updatedCard);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this._http.put(this._cardUrl + "/" + updatedCard.id, body, options)
.map(this.extractData)
.catch(this.handleError);
}
卡片已在数据库中更新。然后路由器将我带回卡片列表。
卡-list.component.ts
import { Component, OnInit} from 'angular2/core'
import { ROUTER_DIRECTIVES } from 'angular2/router'
import { Card } from './card'
import { CardService } from './card.service'
import { CardFilterPipe } from './card-filter.pipe'
@Component({
templateUrl: 'app/card/card-list.component.html',
directives: [ROUTER_DIRECTIVES],
pipes: [CardFilterPipe]
})
export class CardListComponent implements OnInit {
pageTitle: string = 'Card List';
cards: Card[];
errorMessage: string;
listFilter: string;
constructor(private _cardService: CardService) { }
ngOnInit(): void {
this.getCards();
}
getCards() {
this._cardService.getCards()
.subscribe(
result => this.cards = result,
error => this.errorMessage = <any>error);
}
}
问题: 我刚刚在编辑页面上所做的更改没有反映在列表视图中。需要整页刷新才能获取反映最新数据的记录。
我想我明白了。看来我必须在 updateCard() 而不是 onSubmit() 中调用路由器导航。
updateCard(updatedCard: Card) {
// call to service to update record in database
this._cardService.updateCard(updatedCard)
.subscribe(
result => this.response = result,
error => this.errorMessage = <any>error,
() => this._router.navigate(['CardList'])
);
}
我有一个使用 Angular 的简单 CRUD 应用程序 2. 主页显示用户可以创建、编辑或删除的卡片列表。
在卡片编辑页面,当我点击提交时,它调用:
卡-edit.component.ts
onSubmit() {
this.updateCard(this.card);
alert("Card updated!");
this._router.navigate(['/CardList']);
}
updateCard(updatedCard: Card) {
// call to card.service.ts
this._cardService.updateCard(updatedCard)
.subscribe(
result => this.response = result,
error => this.errorMessage = <any>error);
}
card.service.ts
updateCard(updatedCard: Card): Observable<string> {
let body = JSON.stringify(updatedCard);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this._http.put(this._cardUrl + "/" + updatedCard.id, body, options)
.map(this.extractData)
.catch(this.handleError);
}
卡片已在数据库中更新。然后路由器将我带回卡片列表。
卡-list.component.ts
import { Component, OnInit} from 'angular2/core'
import { ROUTER_DIRECTIVES } from 'angular2/router'
import { Card } from './card'
import { CardService } from './card.service'
import { CardFilterPipe } from './card-filter.pipe'
@Component({
templateUrl: 'app/card/card-list.component.html',
directives: [ROUTER_DIRECTIVES],
pipes: [CardFilterPipe]
})
export class CardListComponent implements OnInit {
pageTitle: string = 'Card List';
cards: Card[];
errorMessage: string;
listFilter: string;
constructor(private _cardService: CardService) { }
ngOnInit(): void {
this.getCards();
}
getCards() {
this._cardService.getCards()
.subscribe(
result => this.cards = result,
error => this.errorMessage = <any>error);
}
}
问题: 我刚刚在编辑页面上所做的更改没有反映在列表视图中。需要整页刷新才能获取反映最新数据的记录。
我想我明白了。看来我必须在 updateCard() 而不是 onSubmit() 中调用路由器导航。
updateCard(updatedCard: Card) {
// call to service to update record in database
this._cardService.updateCard(updatedCard)
.subscribe(
result => this.response = result,
error => this.errorMessage = <any>error,
() => this._router.navigate(['CardList'])
);
}