データベースのレコードを更新した後に角度2のビューが更新されない

Question

私は、角度2を使った簡単なCRUDアプリケーションを持っています。メインページには、ユーザーが作成、編集、または削除できるカードのリストが表示されます。カードの編集]ページで

、私が提出クリックしたとき、それはこれを呼び出します。

カード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); 
    } 

} 

問題：私はちょうど編集ページで行った変更がリストビューに反映されません。最新のデータを反映するようにレコードを取得するには、ページ全体を更新する必要があります。

Answer 1

私はそれを理解したと思います。 onSubmit（）の代わりにupdateCard（）でルータのナビゲーションを呼び出さなければならないように見えます。

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']) 
      ); 
}