bug(mat-selection-list): All inputs are checked when changing data used in ng-for

[Yolo-plop]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I'm using a mat-selection-list which iterates over an array of objects to display options:

class Option {
  constructor(
    public label: string,
    public selected: boolean
  ) {
  }
}

public options: Option[] = [
    new Option('Option 1', false),
    new Option('Option 2', true),
    new Option('Option 3', false)
  ]

<mat-selection-list>
  <mat-list-option
    *ngFor="let option of options"
    (click)="updateOptions()"
    [selected]="option.selected"
    color="primary"
    style="color: #3F4254; font-weight: bold;"
    checkboxPosition="before"
  >
    {{ option.label }} {{ option.selected.toString() }}
  </mat-list-option>
</mat-selection-list>

Result show as expected:

Now, clicking on an options runs the following code:

public updateOptions(): void {
    this.options = [
      new Option('Option 1', false),
      new Option('Option 2', true),
      new Option('Option 3', false),
      new Option('Option 4', false),
    ]
  }

And here is the result:

Now, all boxes are checked. The "selected" attribute of the options remains correct.

Settings a timeout fixes the issue but creates a flicker:

public updateOptions(): void {
    this.options = [];

    setTimeout(() => {
      this.options = [
        new Option('Option 1', false),
        new Option('Option 2', true),
        new Option('Option 3', false),
        new Option('Option 4', false),
      ];
    }, 1);
  }

I've created a test case here, just need to clone, install the dependencies and serve the app: https://github.com/Yolo-plop/mat-selection-list

Reproduction

Steps to reproduce:

1. Create a mat-selection-list that iterates over an array of objects binding to one of the object's value to the options' selected attribute
2. Replace the content of the array of objets

Expected Behavior

Mat-list-option items should only be checked if their selected attribute is true.

Actual Behavior

All mat-list-option items are checked after the data has changed.

Environment

• Angular: 15.1.1
• CDK/Material: 15.1.1
• Browser(s): Firefow
• Operating System (e.g. Windows, macOS, Ubuntu): Windows