javascript - 在我调整浏览器大小之前,不会显示在 ngOnInit 中获取的数据
问题描述
我在ngOnInit()
一个对话框中获取了一些数据。当对话框最初弹出时,没有显示任何数据。如果我手动调整浏览器窗口的大小,它就会出现。如果我导航到弹出窗口中的不同选项卡,然后返回原始选项卡,数据也会出现。我的 ngOnInit -
ngOnInit(): void {
this.route.params.pipe(takeUntil(this.destroy$)).subscribe( res => {
this.itemId = res.itemId;
this.getItemComponents(this.itemId);
console.log(this.itemComponents);
}
页面加载时,console.log 显示未定义。我在 getItemComponents 方法中放置了相同的 console.log,如下所示:-
getItemComponents {
this.itemService.getComponents.subscribe( res => {
this.itemComponents = res;
console.log(this.itemComponents);
}
上面的控制台日志记录了我想要的数据。有什么办法吗?我曾尝试在我的 HTML 中使用 ngIf,但它没有帮助。
解决方案
您的钩子console.log
方法在您的方法订阅完成之前启动,因此您需要将其组合在一个链中。尝试使用类似的东西:ngOnInit
getItemComponents
ngOnInit(): void {
this.route.params
.pipe(
takeUntil(this.destroy$),
switchMap(res => this.itemService.getComponents(res.itemId))
)
.subscribe( data => {
this.itemComponents = data;
console.log(this.itemComponents);
}
}
推荐阅读
- mime-types - 媒体类型规范中的“模板”是什么意思?
- database-design - 谷歌日历提醒的提醒数据模型
- javascript - 使用 redux-saga-test-plan,我有一个将函数作为参数的调度操作。这使得测试总是失败
- java - Webview 自定义后退按钮
- python - 发送相同请求时接收来自 tensorflow 服务模型的不同响应
- excel-formula - 如何重新排序 excel 中的数据列/为什么 Xlookup 公式不适用于全套数据?
- acumatica - 使用 Fluent BQL 创建处理视图
- css - 在 github markdown table 中定位图片
- c# - 在 ..Net5.0 中找不到 System.Windows.GridLength
- c++ - developertudio12.6 CC on Solaris intel i386,编译器不显示错误或警告但失败