如何使用来自另一个组件的对象设置选择 Angular mat-selection-list答案

【问题标题】：How to set selections Angular mat-selection-list using object from another component如何使用来自另一个组件的对象设置选择 Angular mat-selection-list
【发布时间】：2018-08-01 16:05:42
【问题描述】：

我有一个使用 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;
}

【问题讨论】：

你应该在你的问题中提供一个最小的例子，而不仅仅是一个链接。

标签： angular angular-material

【解决方案1】：

将您的preSelectedOptionsFromAPI 更新为：

  preSelectedOptionsFromAPI: Array<ICheckBoxListOption> = [
    this.listOfOptionsFromAPI[2],
    this.listOfOptionsFromAPI[4]
  ];

Stackblitz Example

更新：

如果预先选择的选项来自不同的 api，那么只需在初始 listOfOptionsFromAPI 数组中找出这些对象的索引。

let option1FromAPI = {optionId: "003", optionName: "test3"};
let option2FromAPI = {optionId: "005", optionName: "test5"};
let option1Index = this.listOfOptionsFromAPI.findIndex(x => x.optionId === option1FromAPI.optionId);
let option2Index = this.listOfOptionsFromAPI.findIndex(x => x.optionId === option2FromAPI.optionId);
this.preSelectedOptionsFromAPI = [this.listOfOptionsFromAPI[option1Index], this.listOfOptionsFromAPI[option2Index]];

Stackblitz Example

【讨论】：

从长远来看这无济于事，因为这两个变量将来自 API 端点（那时是单独的端点）。有趣的是，这解决了这个问题。我有对象相等问题吗？
@J.Sexton 是的，你有对象相等问题。如果这些选项来自不同的 api 端点，那么您必须使用 array.findindex 对其进行过滤，并且最终必须提供您正在显示的那些选项的索引
感谢更新。这很有帮助。我完全没有想到即使它们的值完全相同，对象也不被视为相等。
@J.Sexton 很高兴它有帮助:)

【解决方案2】：

所以最后我设法通过重新分配对象的方式来解决我的问题。

我变了

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

【讨论】：