如何更新页面并同时以角度 6 加载更新的数据？答案

【问题标题】：How to update the page & simultaneously load the updated data in angular 6?如何更新页面并同时以角度 6 加载更新的数据？
【发布时间】：2018-09-12 03:19:03
【问题描述】：

所以这是我用来调用弹出窗口的代码。在弹出窗口中，我有两个按钮，例如是和否。因此，单击是后，我将调用函数 APIupdate()。它通过 ajax 调用更新我的后端。现在我需要在更新值之后同时在 html 页面中获取更新的值。

我的意思是在更新弹出窗口中的值之后，我需要在我调用弹出窗口的 html 页面中显示更新的值。

TS 1：

  openmodal(key: any): void {
    let obj = this.modal.show(CompleteComponent, undefined, {
        Key: Key
    }).subscribe((r) => {
        if (r.click === 'COMPLETE') {
            this.APIToken();  // calling api
            obj.unsubscribe();
        }
    });
}

弹出式 TS 2：

  APIupdate(statusText, reqid): void {
   this._call.update(statusText,reqid)  //ajax call
  .subscribe(r => {
    this.details = r;
    this.evt.emit({
      'click': 'COMPLETE'
    });
    this.modal.hide(); //pop up hide
  });
 }

所以我尝试使用发出事件，但这不会同时更新我的 html 页面。我需要刷新页面才能看到更改。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： angular

【解决方案1】：

据我了解您的代码，将该数据发布给父级：

this.evt.emit({
  'click': 'COMPLETE', data: r
});

在this.modal.show的订阅者中处理

【讨论】：

非常感谢。你能告诉我如何处理吗？
这取决于您如何显示该数据。 :) 将其分配给类变量 iside if (r.click === 'COMPLETE') { 类似 this.myDataFromPopup = r.data; 并在模板中使用它 <div>{{myDataFromPopup | json }}</div>

【解决方案2】：

在您的示例中，您可以使用ChangeDectectorRef 服务的detectChanges。它的作用是手动触发 Angular 的更改检测，如果需要，它将重新渲染您的模板。

export class ComponentA {
    constructor(private cd: ChangeDectectorRef) {}

    update(): void {
        this.call.update().subscribe(() => {
            // things you need to do
            this.cd.detectChanges();
        })
    }
}

但是，我建议您避免自己调用更改检测。当你需要调用它时，你应该质疑你的架构。

一定要看看async pipe。

【讨论】：