Angular ng-选择组并绑定两个组中都存在的值

Question

我有一种情况，我需要在 ng-select 中对数据进行分组，并且在两个组中我都存在相同的 id，所以当我使用 [(ngModel)] 绑定时，即使我从一个组中选择了项目，它也会从另一个组中选择. 我希望有人能解决这个问题。 提前致谢

    <label>Grouping</label>
    <ng-select [items]="data"
            bindLabel="name"
            bindValue="id"
            groupBy="type"
            [(ngModel)]="selectedValue">
    </ng-select>
    `


selectedValue= 1
data= [
    {id: 1, type: SystemVariables, name: Week},
    {id: 2, type: SystemVariables, name: Week},
    {id: 3, type: SystemVariables, name: Week},
    {id: 1, type: CustomVariables, name: c1},
    {id: 2, type: CustomVariables, name: c2}, 
    {id: 3, type: CustomVariables, name: c3}];

Answer 1

bindValue应该是唯一的。 因此，创建一个连接属性type和id的唯一值

newData = data.map(elm => {
  return {
    ...elm,
    typeId: elm.type + '-' + elm.id
  }
});

现在绑定它，

<ng-select 
  [items]="newData" 
  bindLabel="name" 
  bindValue="typeId" 
  groupBy="type" 
  [(ngModel)]="selectedValue">
</ng-select>

现在像这样从 selectedValue 中提取 id。

const selectedId = 
    this.selectedValue.substring(this.selectedValue.lastIndexOf('-') + 1);

Answer 2

问题出在您的数据中， bindValue="id" so 'id'属性具有重复值，这就是您面临问题的原因。 价值观总是独一无二的。