2

在 Angular 6 项目中，我正在尝试使用ng-select节点包。在使用模板表达式时，我面临着设置下拉列表中选择的项目的困难。没有模板表达式，我可以设置下拉列表中选择的项目。

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

4

1 回答 1

5

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它可以正常工作。如果您将相同的输入添加到第二个控件，它将起作用

分叉的 Stackblitz

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

html

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

ts

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

Stackblitz 示例

否则使用bindValue

于 2019-01-06T16:34:02.423 回答