开发者问题收集

即使在订阅方法中分配,数组仍然未定义

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")) 完成(可能使用 swithcMapcombineLatestwithLatestFrom )。

使用 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