mat-select not updating on selection

Question

I have a mat-select set up like this:

<div #3dContainer class="scene-container">
    <div id="hud">
        <mat-form-field>
            <mat-label>Distance:</mat-label>
            <mat-select (selectionChange)="onSelectChange($event)" [(value)]="measuredSelected">
                <mat-option *ngFor="let measure of measured" [value]="measure">{{measure.z.toFixed(2)}} Metres</mat-option>
            </mat-select>
        </mat-form-field>
        <button mat-icon-button id="exit-btn"  (click)="closeBtnClicked()"><mat-icon>close</mat-icon></button>
    </div>
</div>

the method onSelectChange() calls into setLatestSelection():

private setLatestSelection(firstIndex: number, secondIndex: number, distance: number, addToMeasured: boolean): void{
    let latest = new THREE.Vector3(firstIndex, secondIndex, distance);    

    if(addToMeasured){
      this.measured.push(latest);      
    }
    
    this.measuredSelected = latest;
    this.drawDistanceLine();
    this.cdr.detectChanges();
  }

So there are two routes into this method:

from selecting points where vector needs adding so addToMeasured: boolean is set to true
from selecting an item already in the list (measured array) so addToMeasured: boolean is set to false

This is so that I do not add an identical and useless item to the array. However when the array is not getting updated the selected value is not displayed. MeasuredSelected is set and is the value used as the selected item and is set up in the mat-select tag and it works fine when the array is updated. I already have cdr.detectChanges() (ChangeDetectorRef) which I thought made the system check for changes and the MeasuredSelected value has changed.

Basically my question is how can I force the mat-select to update its values in scenario two?

[edit] p.s. I have tried assigning to a temp var and then assigning back but that did not work.

onesixtyfourth onesixtyfourth · Accepted Answer · 2021-06-09T10:11:45

I have solved this now and I needed to add the line this.measuredSelected = latest; into the if block. I am assuming that this is because I have two way binding in the html as when debugging I noticed that the value of measuredSelected is already set.

private setLatestSelection(firstIndex: number, secondIndex: number, distance: number, addToMeasured: boolean): void{
    let latest = new THREE.Vector3(firstIndex, secondIndex, distance);    

    if(addToMeasured){
      this.measured.push(latest);   
      this.measuredSelected = latest;   
    }
    
    this.drawDistanceLine();
    this.cdr.detectChanges();
  }

mat-select not updating on selection

1 Answers