使用 Observable 取数据时，需要使用 detector.detectChanges Angular v6+

Question

我的 angular 项目中有一个奇怪的错误。当我使用模拟 API 从本地数据获取数据时，一切正常，但是当我切换到在线 API 并使用 Observable 订阅方法获取数据时，数据不会更新我的 angular 模板视图。它只会在我调用 detector.detectChanges() 方法时更新。

简而言之， 不知何故，当我使用在线 API 时，双向数据绑定仅在我调用 detectChanges.[=26= 时有效]

例如想象下面的场景：

 data = [some data here...]
 getData(): Observable<any> {
    return of(this.data);
}

当我在 .ts 文件中调用此方法并使用它获取数据时，angular 模板将自动更新。但是当我切换到下面的代码时：

getData(): Observable<any> {
    let url = `${this.API_URL}/fetchData/`;
    return this.http.get(url);
}

并在我的 angular .ts 文件中获取数据，如下所示：

this.myService.getData().subscribe(result => {
    this.myData = result;
    // this.detector.detectChanges();
})

myData 变量不会在 angular 模板中更新，除非我取消注释 // this.detector.detectChanges() 方法。

并且 detectChanges 是从 angular 的以下库中导入的：

private detector: ChangeDetectorRef,

谁能帮我克服这个错误？这真的很烦人，我的代码现在在任何需要双向数据绑定的代码之后到处都有很多 detectChanges！

提前致谢

更新

我的.html 文件

 <table class="table table-bordered table-striped table-responsive"
                           style="display: inline-table;">
                        <thead>
                        <tr style="left: 0;">
                            <th><span>test</span></th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr style="left: 0;" *ngFor="let d of myData">
                               <td>{{d.test}}</td>
                            </tr>
                        </tbody>
                    </table>

Answer 1

与我不喜欢在 HTML 中执行异步的评论不同，我按照您在上面编码的方式进行操作。我的问题是您在组件上的 ChangeDetectionStrategy 设置是什么。其中一些不会自动通知更改并更新 UI（这可以解释您的问题）。

这是因为，在模板的 app.component.ts 中，它使用 changeDetectionStrategy.onPush，所以基本上每当 angular 上下文中发生任何事情时，我应该使用像 detector.detectChanges() 这样的命令。只需使用 changeDetectionStrategy.Default 一切都会正常，并且 angular 双向绑定将正常工作。

使用 Observable 取数据时，需要使用 detector.detectChanges Angular v6+

When fetching data with Observable, need to use detector.detectChanges Angular v6+

angular

rxjs

observable

two-way-binding

更新