Angular ng-select 组和绑定值存在于两个组中

Question

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

    <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' 属性具有重复值，这就是您遇到问题的原因。值始终是唯一的。

Angular ng-select 组和绑定值存在于两个组中

Angular ng-select group and bind value which exists in both group

angular-ngselect

angular