Question

我有一个可观察的变量，该变量从商店获取其值。我有一个订阅方法可以监听更新。在其中，我尝试为可观察变量的值之一分配一个常规变量。我在控制台上对其进行日志记录，以查看它是否已更新并且已经更新，但是模板中的值未更新。

我尝试听模板中的可观察对象，并且效果很好。但是，我需要操纵返回的答案，所以我不能这样做。

我也尝试过

this.cdr.detectChanges();

可以，但是对于这么简单的东西，它会感到hacky和过大。同样以防万一有人怀疑我的组件没有

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在模板中具有filter.selectedAreas的值。哪个是btw和对象数组。

Answer 1

我遇到了同样的问题，关键是Angular无法检测到超出其范围的更改（在本例中为ngRx）。我认为，如果没有该detectChanges语句，您将无法正常工作。这不是矫kill过正，而是棱角分明的工作方式。

以下是我的问题的链接：

Angular 5 ngOnChanges fires only once in child component

Answer 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">

在内部方法中设置变量时，模板中的变量未更新

2 个答案: