首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用来自另一个组件的对象设置选择角度

如何使用来自另一个组件的对象设置选择角度
EN

Stack Overflow用户
提问于 2018-08-02 00:05:43
回答 1查看 4.3K关注 0票数 0

我使用mat-selection list创建了一个复选框列表组件。当我使用字符串数组时,它工作得很好。此后,我不得不将其更新为使用对象数组,这样我就可以将ids而不是值传递回api。现在我的组件没有预先选择我传递给它的选项。

这是我的slackblitz https://stackblitz.com/edit/angular-material2-issue-yghjci

组件HTML

代码语言:javascript
复制
<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>

使用组件

代码语言:javascript
复制
<app-checkbox-list [listOfOptions]="myOptionList" [(selectedOptions)]="mySelectedOptions"></app-checkbox-list>

正在初始化数据

代码语言:javascript
复制
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;
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-02 05:12:57

所以最后我通过修改对象的赋值方式来解决我的问题。

我变了

代码语言:javascript
复制
ngOnInit(): void {
    this.myOptionList = this.listOfOptionsFromAPI;
    this.mySelectedOptions = this.preSelectedOptionsFromAPI;
}

代码语言:javascript
复制
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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51637797

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档