如何使用来自另一个组件的对象设置选择角度
如何使用来自另一个组件的对象设置选择角度
提问于 2018-08-02 00:05:43
我使用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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51637797
复制相关文章
相似问题
腾讯云开发者
