在Angular 7中,当订阅返回值后,UI未更新的问题通常是由于订阅返回的数据类型不是可观察对象(Observable)引起的。下面是一个解决方法的代码示例:
首先,在组件中创建一个可观察对象,并使用async
管道在模板中订阅返回的值:
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'app-my-component',
template: `
{{ data$ | async }}
`,
})
export class MyComponent {
data$: Observable;
constructor() {
this.data$ = this.getData();
}
getData(): Observable {
// 返回一个可观察对象
return new Observable(observer => {
// 模拟异步操作
setTimeout(() => {
observer.next('Hello Angular 7!');
observer.complete();
}, 2000);
});
}
}
在上面的代码中,使用getData()
方法返回了一个可观察对象,并在constructor
中将其赋值给data$
变量。在模板中使用async
管道来订阅data$
变量,这样当可观察对象发出新值时,模板中的UI会自动更新。
另外,需要确保在组件中正确导入相关的模块和依赖项。在这个例子中,我们引入了Component
和Observable
模块。
这是一个简单的解决方法,但在实际应用中,可能需要更复杂的逻辑来处理数据订阅和更新UI的问题。