如何在放置请求后刷新模态页面?

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((。这不是我要找的:)

网页内容;

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