bug(MatSelect): Mat-Select displays wrong value when values are saved in array

[BomL97]

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

A dynamic section of mat-selects display wrong values when values are saved in an array. When a value is selected in the last mat-select (mat-select in last row) of the section a new row with a mat-select appears and displays the same value as the previous mat-select. This indicates they have the same value. However, the array saves the values of the mat-selects correctly, which indicates that it is a display issue.

Reproduction

Steps to reproduce:

1. Open: https://stackblitz.com/edit/angular-material-13-starter-x1xj4z-mf6x7l?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts
2. Choose any Option in displayed mat-select
3. Newly added mat-select should display same Option (which is wrong)

Expected Behavior

If an option is chosen the newly added mat-select should not have an option displayed as seen in the image below:

Actual Behavior

If an option is chosen the newly added mat-select displays the exact same option as the previous one as seen in the image below:

Environment

• Angular: 14.1.3
• CDK/Material: 14.1.2
• Browser(s): Chrome (104.0.5112.81), Edge (104.0.1293.54), FireFox (103.0.2), Safari (15.5)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows, macOS

[wagnermaciel]

Seems like a real issue, but having mat-select in an ngFor seems pretty edge-casey, and there's an easy workaround so I'll leave this as p4. If we find more people throwing the mat-select inside an ngFor we can revisit this

Here's a workaround that ensures the "null" select gets the memo when the update happens 👍🏽

https://stackblitz.com/edit/angular-material-13-starter-x1xj4z-zqeudq?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts

[lekhmanrus]

Also, it could be solved by adding trackBy to *ngFor. See StackBlitz.