How to make two-way binding in mat-select work

Question

I have following code:

<mat-form-field>
  <mat-select [(ngModel)]="valueFromDB.name">
    <mat-option>None</mat-option>
    <mat-option *ngFor="let option of options" [value]="option.name"
      >{{option.name}}</mat-option
    >
  </mat-select>
</mat-form-field>

valueFromDB = new Option('Option');

And I suppose then on loading I got option2 selected. But instead I have empty selection. What am I doing wrong? Working sample is here.

Answer 1

I suspect that it doesn't work because the option 'Option' is not in the array options. Make sure that exactly such a string 'Option' is present in the array. For example, if you have this array

 options = [
    new Option('Option1'),
    new Option('Option2'),
    new Option('Option3'),
  ];

here you must have not 'Option' but 'Option1' or another from the array valueFromDB = new Option('Option1');