首页 > 解决方案 > 角度 8 中超出了最大调用堆栈大小

问题描述

我有 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是产品代码。

标签: c#angulartypescriptasp.net-coreangular8

解决方案


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

用户选择一个sku提示ngModelChange触发导致 onCodeChange()执行的。

onCodeChange重置productName再次导致ngModelChange触发的控件,但这次是为product控件onProductChange

onProductChange然后重置sku因此调用的onCodeChange.

然后这种情况一直持续下去。onCodeChange间接调用onProductChangeonProductChange间接调用onCodeChange

您需要将重置代码拉出到onselection事件或类似的东西中。


推荐阅读