Angular 7 - [ngModel] not working with mat-select

Question

Not sure where I am going wrong, but I cannot seem to get ngModel working with the following scenario:

Here is the template code:

    <mat-select [ngModel]="data.dataObject[0].phase">
            <mat-option *ngFor="let phase of possiblePhases" [value]="phase">
                {{phase}}
            </mat-option>
    </mat-select>

Here is the possible phases array from the component:

possiblePhases: string[] = ['Test1', 'Test2', 'Test3'];

And finally here is the data object I am trying to bind a value from:

[

The selector is only returning one of the values from the array.

I have tried changing the possiblePhases like so:

  possiblePhases = [
    {phase: 'Test1'},
    {phase: 'Test2'},
    {phase: 'Test3'}
  ];

But this did not work either.

Answer 1

You'll need to use two way data binding here, using the [(ngModel)]="data.dataObject[0].phase" syntax:

<mat-select 
  [(ngModel)]="data.dataObject[0].phase" 
  (selectionChange)="onChange()">
    <mat-option 
      *ngFor="let phase of possiblePhases" 
      [value]="phase">
        {{phase}}
    </mat-option>
</mat-select>