Question

我有一个使用mat-selection-list作为复选框列表的组件。当我使用字符串数组时，它的效果很好。从那以后，我不得不对其进行更新以使用对象数组，因此我可以将id传递回api而不是值。现在，我的组件不会预先选择要传递给它的选项。
这是我的https://stackblitz.com/edit/angular-material2-issue-yghjci
组件HTML

使用组件

typeof(int)

初始化数据

typeof(int?)

Answer 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

Answer 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

如何使用其他组件中的对象设置选择角度垫选择列表

2 个答案: