首页 > 解决方案 > 更新项目时Angular 6 ng-select空值

问题描述

我正在为我的 Angular 6 应用程序使用 ng-select,但我在更新 [items] 模型时遇到了问题。

我有动态添加输入,我正在使用 ng-select。Ng-selects 选项是字典项。但我不能重复选择的值。所以,当我添加新产品时,我会更新 ng-select 选项([items])。但是当我这样做时,之前添加的值会在视图中随机清除。很多时候都在清除(但值仍在表单模型中)。

这是我的 ng 选择:

<ng-select formControlName="productCode"
       [items]="avalaibleProductsDict"
       [selectOnTab]="true"
       bindLabel="name"
       bindValue="code"
       labelForId="productCode"
       (ngModelChange)="onSelect(i, product.code)"
       (focus)="setAvailableProductsDict(item.productType)"
       placeholder="Type a product"
       [required]="true">

和这里更新可用产品的功能:

  public setAvailableProductsDict(editingItem: ProductItemType): void {
let choosedProducts;

if (this.products && this.products.items) {
// map choosed products
  choosedProducts = this.products.items
    .map(
      item => {
        return {
          code: item.productType.code
        }
      });
} else {
  choosedProducts = [];
}


const availableProducts = _.differenceBy(this.productsDictionary, choosedProducts, 'code');
availableProducts.unshift(editingItem);
this.avalaibleProductsDict = _.tail(availableProducts);

}

我的问题是我做错了什么?如何正确刷新可用的字典项以避免出现空白值?

更新: 当我的项目模型(这里是我的字典)没有变化时,一切都很好,但是当我更新字典时,输入被随机清除。我试过过滤器,但它也不起作用。我在文档中发现“Ng-select 组件实现了 OnPush 更改检测,这意味着脏检查检查不可变数据类型。”。另外,我在文档中找到了 typeaheaf 和 searchFn。但是不知道怎么用。。

标签: typescriptangular6angular-ngselect

解决方案


推荐阅读