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元素

如何在put请求后刷新模态页面？

2 个答案: