即使在订阅方法中分配,数组仍然未定义
2020-04-24
627
在我的Angular应用程序中,数组
productLocations
在订阅中的
ngoninit
方法中分配,然后在方法中使用,但仍未定义。从搜索stackoverflow上,每个人都说在订阅中移动分配。它已经在订阅中,但我收到错误。如何按顺序正确执行内容?
259290382
组件文件
772123780
1个回答
发生这种情况的原因可能是以下代码块的执行时间早于订阅:
if (this.editMode) {
this.populateProductLocations();
this.populatePriceLists();
}
要验证这一点,您可以在该代码块中以及分配值的订阅中执行 console.log(或放置断点)。
您应该考虑重构代码,以便
this.populateProductLocations()
位于同一代码块中的
this.productLocations = this.product.locations;
之后,或者等到
this.productService.get(localStorage.getItem("editProductId"))
完成(可能使用
swithcMap
、
combineLatest
或
withLatestFrom
)。
使用 ForkJoin
forkJoin
也应该可以工作,因为它会等待所有可观察对象完成,并且因为你已经有了它,你可以将你的代码移到 forkJoin 中,如下所示(我注释掉了现有代码以阐明添加了什么):
forkJoin([
// this.productManufacturerService.getList(),
// this.productModelService.getList(),
// this.productCategoryService.getList(),
// this.branchService.getList(),
// this.priceListService.getList(),
this.productService.get(localStorage.getItem("editProductId"))
])
.subscribe((results: any) => {
// this.productManufacturerOptions = results[0];
// this.productManufacturerStart();
// this.productModelOptions = results[1];
// this.productModelStart();
// this.productCategoryOptions = results[2];
// this.productCategoryStart();
// this.branches = results[3];
// this.priceLists = results[4];
this.product = new Product(result);
this.productLocations = this.product.locations;
this.productPrices = this.product.prices;
this.populateUpdateData(results[5]);
},
ulmas
2020-04-24