我使用mat-selection list创建了一个复选框列表组件。当我使用字符串数组时,它工作得很好。此后,我不得不将其更新为使用对象数组,这样我就可以将ids而不是值传递回api。现在我的组件没有预先选择我传递给它的选项。
这是我的slackblitz https://stackblitz.com/edit/angular-material2-issue-yghjci
组件HTML
<mat-selection-list #optionList [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
<mat-list-option checkboxPosition="before" *ngFor="let optionItem of listOfOptions" [value]="optionItem">
{{optionItem.optionName | titlecase}}
</mat-list-option>
</mat-selection-list>
使用组件
<app-checkbox-list [listOfOptions]="myOptionList" [(selectedOptions)]="mySelectedOptions"></app-checkbox-list>
正在初始化数据
myOptionList:Array<ICheckBoxListOption>;
mySelectedOptions: Array<ICheckBoxListOption>;
listOfOptionsFromAPI: Array<ICheckBoxListOption> = [
{optionId: "001", optionName: "test1"},
{optionId: "002", optionName: "test2"},
{optionId: "003", optionName: "test3"},
{optionId: "004", optionName: "test4"},
{optionId: "005", optionName: "test5"},
];
preSelectedOptionsFromAPI: Array<ICheckBoxListOption> = [
{optionId: "003", optionName: "test3"},
{optionId: "005", optionName: "test5"},
];
ngOnInit(): void {
this.myOptionList = this.listOfOptionsFromAPI;
this.mySelectedOptions = this.preSelectedOptionsFromAPI;
}
发布于 2018-08-02 05:12:57
所以最后我通过修改对象的赋值方式来解决我的问题。
我变了
ngOnInit(): void {
this.myOptionList = this.listOfOptionsFromAPI;
this.mySelectedOptions = this.preSelectedOptionsFromAPI;
}
至
ngOnInit(): void {
this.myOptionList = this.listOfOptionsFromAPI;
this.mySelectedOptions = this.listOfOptionsFromAPI.filter(option => { return this.preSelectedOptionsFromAPI.find(select => {return option.optionId == select.optionId})});
}
这似乎允许对象真正相等,而不是值相等。
Slackblitz解决方案:https://stackblitz.com/edit/angular-material2-issue-in9ub6
https://stackoverflow.com/questions/51637797
复制相似问题