角度 8 中超出了最大调用堆栈大小

Question

我有 2 个下拉列表。我正在将产品数据绑定到它。在一个带有产品代码的下拉列表中和第二个带有产品名称的下拉列表中。当我从第一个下拉列表中选择产品代码时，第二个下拉列表需要根据产品代码选择产品名称。使用一个下拉菜单很好。当为第二个下拉菜单编写相同的逻辑时出现错误

超过最大调用堆栈大小。

 <div class="col-md-9">
 <select id="Code" class="form-control" placeholder="Code"
(ngModelChange)="onCodeChange()" formControlName="sku" required>
 <option [value]="''">Select Code</option>  <option [value]="product.sku"
  *ngFor="let product of productData">   {{product.sku}}
  </option>
 </select>                                                      
  </div>



<div class="col-md-9">
 <select id="name" class="form-control" placeholder="Name"
 (ngModelChange)="onProductChange()" formControlName="productName" required>
  <option [value]="''">Select Name</option>
 <option [value]="product.productName" *ngFor="let product of productData">
 {{product.productName}}
 </option>
</select>
</div>

onCodeChange(): void {
         const stock = (this.sharedService.where(this.productData, 'sku', this.stockForm.controls.sku.value) || {}) as any;
         this.stockForm.controls.productName.reset( stock.productName);

    }
    onProductChange(): void {
        const stock = (this.sharedService.where(this.productData, 'productName', this.stockForm.controls.productName.value) || {}) as any;
        this.stockForm.controls.sku.reset( stock.sku);

    }

productdata 上方包含产品相关信息。这里 sku 是产品代码。

Answer 1

没错，所以我最好的猜测是你已经设法为自己创建了一个无限循环。

用户选择一个sku 会提示ngModelChange 触发，从而导致onCodeChange() 被执行。

onCodeChange 重置productName 控件，这会再次导致ngModelChange 触发，但这次是product 控件onProductChange。

onProductChange 然后重置sku 从而调用onCodeChange。

然后这样继续下去。 onCodeChange间接调用onProductChange和onProductChange间接调用onCodeChange。

您需要将重置代码提取到onselection 事件或类似事件中。