Components: Mat-Selection-List SelectionModel not selecting the options

[sivahanuman]

Hi Mat-Selection-List not selecting the items, i am binding json array to selection and options.

Bug

mat-list-option show as selected

mat-selection-list not selecting the items

Issue on stackblitz

I am using Angular 5, VSCode 1.20.1 and chrome version 65.0.3325.181

[donroyco]

Why are you opening a new instance of your previous issue? #10596

[sivahanuman]

Sorry I thought that post is closed

[josephperrott]

This is working as expected. You are attempting to assign a different object as selected rather than one of the objects in the list.

You can see this working version forked from your stackblitz you provided.

The relevant code snippet that was changed is below:

export class AppComponent {
  ar = [
    {"id": 1,"name": "test1"},
    {"id": 2,"name": "test2"}
  ];
  sar: any[];
  constructor() {
    this.sar = [this.ar[1]];
  }
}

[sivahanuman]

Ì don't know why are you closiclosing the thread even you not giving the solution?
If I open another thread then asking me that why did I open new thread?

So mat-selection not working with json object right?

You mean option object and selection of object should be same other wise mat-selection will not select options right?

So Employee object options can't be selected with SelectedEmployee object ???

[josephperrott]

Sorry, if I was unclear I will try to expand a bit. I closed the issue you because the issue are running into isn't an issue with the MatSelectionList, but rather an effect of equality of javascript objects.

For an object to be equal it must be the same object, not just an object containing the same keys and values.

To explain a bit more:

let obj1 = {a: 1, b: 'test'};
let obj2 = {a: 1, b: 'test'};
console.log(obj1 == obj2); // This will log false, as obj1 and obj2 are not the same object.

However,

let obj1 = {a: 1, b: 'test'};
let obj2 = obj1;
console.log(obj1 == obj2); // This will log true, as obj1 and obj2 are the same exact object.

For you example, you are trying to set an initial value of the select with a new object that has the same key value pairs. Instead you will need to set the initial value as references to the actual same object.

[SalahudinMalik]

Facing the same problem
https://github.com/angular/material2/issues/10780

[simeyla]

Just put a string representation of the object key into the list.
Combine two properties if your key is composite.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}