在订阅方法中设置时变量未在模板中更新答案

【问题标题】：Variable not updating in template when set inside subscribe method在订阅方法中设置时变量未在模板中更新
【发布时间】：2019-05-17 14:47:34
【问题描述】：

我有一个可观察的变量，它从存储中获取它的值。我有一个订阅方法来收听更新。在其中，我尝试将常规变量分配为可观察变量的值之一。我通过控制台记录它以查看它是否已更新并且它已更新但模板中的值未更新。

我已经尝试在模板中聆听 observable 并且效果很好。但是，我需要操纵返回的答案，所以我不能这样做。

我也试过

this.cdr.detectChanges();

这很有效，但对于如此简单的事情来说，它感觉很老套和矫枉过正。也以防万一有人想知道我的组件没有

ChangeDetectionStrategy=OnPush

这就是变量的初始化方式。

this.filters$ = this.store.let(getListsContactsFilters());

这就是订阅的样子。

this.filters$.subscribe((filters) => {
   this.selectedAreas = filters.selectedAreas;
});

然后我在模板中执行此操作

<div *ngFor="let area of selectedAreas">
  <h1>{{area.title}}</h1>
</div>

我也尝试在模板中打印出 selectedAreas：

{{selectedAreas | json}}

即使在订阅功能被触发后，它仍然是一个空数组。

真的超级简单，所以天知道为什么它不起作用。

我希望 this.selectedAreas 在模板中具有 filters.selectedAreas 的值。顺便说一句，对象数组。

【问题讨论】：

更新了我的答案
@thnksfrthmmrs 确保没有另一个函数同时触发阻止或模糊预期结果。如果有，您可能需要添加 {emitEvent: false}

标签： angular rxjs ngrx

【解决方案1】：

我也遇到过同样的问题，关键是 Angular 无法检测到其范围之外的更改（在本例中为 ngRx）。我认为如果没有该 detectChanges 语句，您将无法正常工作。这不是矫枉过正，这是 Angular 的工作原理。

这是我的问题的链接：

Angular 5 ngOnChanges fires only once in child component

【讨论】：

如果您使用异步管道在模板中进行订阅，那么 OP 的代码如何正常工作？仅当您进行手动订阅时，因为 OP 描述了它没有更新的地方......

【解决方案2】：

请尝试

<div *ngFor="let area of (selectedAreas | async)">

它帮助了我。我用在

this.autoUploadSubscription = this.flow.events$.subscribe(event => {}

<tr *ngFor="let attachment of  (flow.transfers$ | async).transfers"></tr>

trackTransfer(transfer: Transfer) {
  return transfer.id;
}

https://medium.com/angular-in-depth/angular-question-rxjs-subscribe-vs-async-pipe-in-component-templates-c956c8c0c794

records$: Observable<any>;

ngOnInit() {
  this.records$ = this.clientService.getAll(1, this.pagesize);
}

<table *ngIf="records$ | async as records">
  <tr *ngFor="let record of records.data">

【讨论】：