我正在尝试在ng-select下拉菜单中修补多个选定项。我没有指定任何bindValue,因此这些项目应按对象进行绑定(如https://www.npmjs.com/package/@ng-select/ng-select所指定)
但是在尝试执行此操作时,不会根据对象而是根据显示的标签来选择项目。也只有第一个标签被选中。
示例:app.component.html
<form [formGroup]="group">
<div class="form-group" formGroupName="school">
<ng-select labelForId="school" placeholder="Select school" [items]="schools" formControlName="code"
bindLabel="displayLabel" multiple="true" groupBy="city">
</ng-select>
</div>
</form>
app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
group: FormGroup;
schools = [];
constructor(private fb: FormBuilder) { }
ngOnInit() {
this.initSchools();
const formModel = {
school: new FormGroup({
code: new FormControl(null, Validators.required)
})
}
this.group = this.fb.group(formModel);
this.group.patchValue({
school: {
code:
[
{
schoolId: 'SC003',
displayLabel: 'Test-3 school',
city: "City1"
},
{
schoolId: 'SC005',
displayLabel: 'Test-3 school',
city: "City5"
}
]
}
});
}
initSchools() {
this.schools.push(
{
schoolId: 'SC001',
displayLabel: 'Test-1 school',
city: "City1"
},
{
schoolId: 'SC002',
displayLabel: 'Test-2 school',
city: "City2"
},
{
schoolId: 'SC003',
displayLabel: 'Test-3 school',
city: "City3"
},
{
schoolId: 'SC004',
displayLabel: 'Test-4 school',
city: "City4"
},
{
schoolId: 'SC005',
displayLabel: 'Test-3 school',
city: "City5"
}
);
}
}
在上面的示例中,仅项目的对象
{
schoolId: 'SC003',
displayLabel: 'Test-3 school',
city: "City1"
},
被选中,
并且下面的项目没有
{
schoolId: 'SC005',
displayLabel: 'Test-3 school',
city: "City5"
}
应该采用什么方式来使两个项目都在下拉菜单中被选中(并提供唯一的对象)。这里有什么遗漏的东西吗?其他实现此目的的方法。
有示例在这里运行:https://stackblitz.com/edit/angular-szel64?file=src%2Fapp%2Fapp.component.ts
发现ng-select有一个compareWith选项,可让您定义一个比较对象的函数。您可以使用此对象绑定对象,并根据compareWith选项提供的功能对其进行选择。
下面是我的更改,以防有人陷入同一问题