Question

我是Angular的新手，我尝试使用我已经创建的API来对我在表格中显示的某些数据执行基本的CRUD操作。这些操作似乎工作正常（我的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

App：

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

Angular2组件不会根据对数据库的更改进行更新

1 个答案: