Question

我有一个使用Angular 2的简单CRUD应用程序。主页面显示用户可以创建，编辑或删除的卡片列表。

在卡片编辑页面上，当我点击提交时，它会调用：

卡edit.component.ts

comctl32.dll

card.service.ts

onSubmit() {
        this.updateCard(this.card);

        alert("Card updated!");        
        this._router.navigate(['/CardList']);
    }

updateCard(updatedCard: Card) {
        // call to card.service.ts
        this._cardService.updateCard(updatedCard)
            .subscribe(
            result => this.response = result,
            error => this.errorMessage = <any>error);
    }

卡片在数据库中更新。然后路由器将我带回到卡片列表中。

卡list.component.ts

updateCard(updatedCard: Card): Observable<string> {
        let body = JSON.stringify(updatedCard);
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        return this._http.put(this._cardUrl + "/" + updatedCard.id, body, options)
            .map(this.extractData)
            .catch(this.handleError);
    }

问题：我刚刚在编辑页面上进行的更改未反映在列表视图中。需要整页刷新才能获得记录以反映最新数据。

Answer 1

我想我明白了。看起来我必须在updateCard（）而不是onSubmit（）中调用路由器导航。

updateCard(updatedCard: Card) {
        // call to service to update record in database
        this._cardService.updateCard(updatedCard)
            .subscribe(
            result => this.response = result,
            error => this.errorMessage = <any>error,
            () => this._router.navigate(['CardList'])
            );
}

更新数据库中的记录后，Angular 2视图未更新

1 个答案: