组件看不到订阅更改

Question

component.ts

export class MyComponent implements OnInit {
constructor(
private router: Router,
private store: Store<fromApp.State>
) {}
loading: boolean;
ngOnInit(): void {
this.store.select('myState').subscribe(({ loading }) => {
this.loading = loading;
console.log(this.loading);
});
}
}

component.html

<div *ngIf="loading">
loading
</div>
<div *ngIf="!loading">not loading</div>

在浏览器控制台中，我可以看到两种状态loading=false和loading=true之间的切换。然而，在浏览器中，我总是看到"；加载"；。我在这里错过了什么？

Answer 1

这意味着当您的可观察对象启动时，不会触发更改检测周期。它通常在使用OnPush策略时出现(->提高性能，因为运行的检测周期较少，但您必须更明确地了解对方的更改(。

因此，有3种方法可以解决您的问题：

• 在组件树中禁用OnPush策略(不推荐，您肯定会从其他地方受益(
• 您明确运行更改检测周期：

constructor(..., private cdr: ChangeDetectorRef) {...}
// then in your subscription code:
this.loading = false;
this.cdr.markForCheck();

• 您在组件模板代码中使用异步管道，因为它与ngZone:*ngIf="loading$ | async"配合得很好，这意味着您的可观察加载保持原样：loading$ = this.store.select('myState').pipe(map(s => s.loading))