放置请求后如何刷新模式页面？

Question

我有一个模式页面，它在视图中显示了一些锦标赛比赛。而且，还有一个用于更新比赛分数的按钮。但是，我需要重新加载页面以从服务器获取新分数并在屏幕上进行演示。但是，我无法弄清楚如何做到这一点。

以下是我获取更新分数的函数；

getMatches() {
    this.http.get(this.MATCHES_URL, { headers: this.contentHeader })
      .map(res => res.json())
      .subscribe(
      data => {
        this.matches = data;
      },
      err => alert(err),
    );
  }

我在哪里可以调用它来更新屏幕上的分数？请不要说我 window.location.reload()。那不是我要找的:)

HTML 内容；

<ion-content>
  <div *ngIf="matches.length <= 0"><br>
    <h3>Tournament is not scheduled yet!!</h3>
  </div>
  <div *ngIf="matches !== undefined">
    <ion-list>
      <ion-list-header>
        Round 1
      </ion-list-header>
      <ion-item *ngFor="let match of matches">
        <ion-grid>
          <ion-row>
            <ion-col class="team_home">
              <div>
                <img class="home_logo" [src]="match.team_a.logo">
                <h2>{{match.team_a.team_name}}</h2>
              </div>
            </ion-col>
            <ion-col>
              <div *ngIf="match.match_status ==='Finished'" class="score">
                <h1>{{match.team_a_score}}-{{match.team_b_score}}</h1>
              </div>
              <div *ngIf="match.match_status==='Not Started'" class="score">
                <h1>VS</h1>
              </div>
            </ion-col>
            <ion-col class="team_visitor">
              <div>
                <img class="visitor_logo" [src]="match.team_b.logo">
                <h2>{{match.team_b.team_name}}</h2>
              </div>
            </ion-col>
          </ion-row>
        </ion-grid>
        <div *ngIf="username === tournament.creator[0]">
          <button ion-button clear (click)="enterScores(match.id,match.team_a, match.team_b)" color="danger" icon-left>
      <ion-icon name='stats'></ion-icon>
          Enter Scores
        </button>
        </div>
      </ion-item>
    </ion-list>
  </div>
</ion-content>

我用来更新分数的函数；

updateScore(id, team_a_score, team_b_score) {
    this.UPDATE_SCORE_URL = this.UPDATE_SCORE_URL + id + "/";
    console.log(this.UPDATE_SCORE_URL);
    let params = {
      match_status: 'Finished',
      team_a_score: +team_a_score,
      team_b_score: +team_b_score
    }


    this.http.put(this.UPDATE_SCORE_URL, JSON.stringify(params), { headers: this.contentHeader })
      .map(res => res.json())
      .subscribe(
      data => console.log("adding success"),
      err => alert(err),
    );
  }

  enterScores(id, team_a, team_b) {
    let alert = this.alertCtrl.create({
      title: 'Update Scores',
      inputs: [
        {
          name: 'team_a_score',
          placeholder: team_a.team_name
        },
        {
          name: 'team_b_score',
          placeholder: team_b.team_name,
          type: 'number'
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: data => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Update',
          handler: data => {
            this.updateScore(id, data.team_a_score, data.team_b_score);
          }
        }
      ]
    });
    alert.present();
  }
}

Answer 1

通常，Angular 会检测您是否更新数据并自动重绘视图。

所以要更新你只需要更新视图用来绘制自身的数据。

Answer 2

好吧，既然您使用的是 Angular，我认为重新加载页面不是一个好主意，这就是 Angular 的全部意义（服务于单页应用程序）。我的建议是对匹配变量使用属性绑定或字符串插值，因此如果您想在单独的段落中显示所有分数，您可以在模板中执行以下操作：

<p *ngFor="let match of matches">{{ match.score }}</p>

这是字符串插值，将为每个匹配项创建一个段落 HTML 元素