angular 6 ng-select 如何使用模板表达式在下拉列表中设置项目 selected

Question

在 Angular 6 项目中，我尝试使用 ng-select 节点包。在使用模板表达式时，我很难在下拉列表中设置项目 selected。没有模板表达式，我可以在下拉列表中设置项目 selected。

我在 stackblitz 中创建了一个演示项目。请检查这里的代码 https://stackblitz.com/edit/ngselect-demo

Answer 1

ng-select 是比较数组中元素的非常灵活的组件。

这是负责比较的 findItem 函数：

findItem(value: any): NgOption {
    let findBy: (item: NgOption) => boolean;
    if (this._ngSelect.compareWith) {
        findBy = item => this._ngSelect.compareWith(item.value, value)
    } else if (this._ngSelect.bindValue) {
        findBy = item => !item.children && this.resolveNested(item.value, this._ngSelect.bindValue) === value
    } else {
        findBy = item => item.value === value ||
            !item.children && item.label && item.label === this.resolveNested(value, this._ngSelect.bindLabel)
    }
    return this._items.find(item => findBy(item));
}

如您所见，它遵循以下规则：

1) 如果提供，则使用 compareWith 函数，否则

2) 如果提供，则使用 bindValue，否则使用

3) 如果提供

，则使用bindLabel

在第一个不使用模板表达式的控件中，您传递了 bindLabel 因此它可以正常工作。如果您将相同的输入添加到第二个控件，它将起作用

Forked Stackblitz

如果您想将 selected 值保留为对象数组，那么我建议您使用 compareWith 输入

html

<ng-select 
  ...
  [compareWith]="compareWith"

ts

compareWith(item, selected) {
  return item.id === selected.id
}

Stackblitz Example

否则使用bindValue

angular 6 ng-select 如何使用模板表达式在下拉列表中设置项目 selected

angular 6 ng-select how to set item selected in drop down list by using template expression

angular-ngselect

angular