在Angular 7中,如果Observable数据不会更新视图,很可能是由于没有使用正确的变更检测策略或订阅数据的方式不正确。
以下是解决此问题的一些示例方法:
使用async管道: 在Angular 7中,可以使用async管道来自动订阅并处理Observable数据的更新。使用async管道可以确保视图在Observable数据发生变化时自动更新。
在组件模板中,使用async管道订阅Observable数据:
{{ observableData$ | async }}
手动订阅Observable数据: 如果您不想使用async管道,可以手动订阅Observable数据并在组件中更新视图。
在组件类中,订阅Observable数据并将其分配给一个变量:
import { Observable } from 'rxjs';
export class YourComponent implements OnInit {
observableData$: Observable;
ngOnInit() {
this.observableData$ = // your Observable data source
this.observableData$.subscribe(data => {
// update the view with the new data
});
}
}
使用变更检测策略: 如果Observable数据不更新视图,可能是因为默认的变更检测策略不会检测到Observable数据的更改。您可以尝试手动更改变更检测策略。
在组件类中,使用ChangeDetectionStrategy.OnPush变更检测策略:
import { ChangeDetectionStrategy } from '@angular/core';
@Component({
// ...
changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent {
// ...
}
这将告诉Angular仅在输入属性发生更改或手动触发变更检测时才更新视图。
请根据您的实际情况选择适合您的解决方案。