データベースへの変更に基づいてAngular2コンポーネントが更新されない

Question

私はAngularを初めて使いました。テーブルに表示しているデータに対して基本的なCRUD操作を実行するために既に作成したAPIを使用しようとしています。これらの操作はうまくいくように見えますが（AWSのデータベースが更新されています）、私の見解は更新されません。たとえば、プレイヤーを削除するとデータベースから削除されますが、コンポーネントビュー（ページに表示されているテーブル）は更新されず、削除されたプレーヤーは引き続き表示されます。

私はObservableを使ってすべてを同期させておくべきだと知っていますが、正しく実装しているとは思いません。誰か私が間違ってやっていることを教えてもらえますか？

スコア-table.component.ts

import { Component } from '@angular/core'; 
import { HighScore } from './high-score'; 
import { ScoreDataService } from './score-data.service'; 

@Component({ 
    selector: 'scores-table', 
    templateUrl: 'app/scores-table.component.html' 
}) 

export class ScoresTableComponent { 
    errorMessage: string; 
    statusCode: string; 
    highScores: HighScore[]; 
    mode = 'Observable'; 

    constructor(private scoreDataService: ScoreDataService) {} 

    ngOnInit() { 
     this.getScores(); 
    } 

    getScores() { 
     return this.scoreDataService.getScores().subscribe(
         highScores => this.highScores = highScores, 
         error => this.errorMessage = <any>error); 
    } 

    addPlayer (email: string, score: number) { 
     this.errorMessage = ""; 
     if (!email || !score) { return; } 
     this.scoreDataService.addPlayer(email, score) 
         .subscribe(
         code => this.statusCode = code, 
         error => this.errorMessage = <any>error); 
    } 

    deletePlayer(email: string) { 
     this.scoreDataService.deletePlayer(email); 
    } 
} 

スコアdata.service.ts

import {Injectable} from '@angular/core'; 
import { Observable } from 'rxjs/Rx'; 
import {Http, Response} from '@angular/http'; 
import { Headers, RequestOptions } from '@angular/http'; 
import {HighScore} from '../app/high-score' 

@Injectable() 
export class ScoreDataService { 
    private url = "MY API URL"; 

    constructor(private http:Http){ } 

    getScores(): Observable<HighScore[]> { 
    return this.http.get(this.url) 
     .map(this.extractData) 
     .catch(this.handleError); 
    } 

    addPlayer(email: string, score: number): Observable<string> { 
    let body = JSON.stringify({ email, score }); 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 

    return this.http.post(this.url, body, options) 
        .map(this.extractStatus) 
        .catch(this.handleError); 
    } 

    deletePlayer(email: string) { 
    return this.http.delete(this.url + email).subscribe(); 
    } 

    private extractData(res: Response) { 
    let body = res.json(); 
    return body.message || { }; 
    } 

    private extractStatus(res: Response) { 
    let status = res.json(); 
    return status.statusCode || { }; 
    } 

    private handleError (error: any) { 
    // In a real world app, we might use a remote logging infrastructure 
    // We'd also dig deeper into the error to get a better message 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    console.error(errMsg); // log to console instead 
    return Observable.throw(errMsg); 
    } 
} 

スコア-table.component.html

<table> 
    <tr *ngFor="let highScore of highScores"> 
     <td>{{highScore.email}}</td> 
     <td>{{highScore.score}}</td> 
     <td><button (click)="deletePlayer(highScore.email)"> X </button></td> 
    </tr> 
</table> 

<h2>Add New Player</h2> 
Player email:<br> 
<input #email /> 
<br> 
High Score:<br> 
<input #score /> 
<br><br> 
<button (click)="addPlayer(email.value, score.value)">Add Player</button> 
<div class="error" *ngIf="errorMessage">{{errorMessage}}</div> 

Answer 1

アプリ：

deletePlayer(email: string) { 
    this.scoreDataService.deletePlayer(email) 
    .subscribe(
     this.highScores = this.highScores.filter(highScore => highScore.email !== email); 
    ); 
} 

サービス：

deletePlayer(email: string) { 
    return this.http.delete(this.url + email); 
}