mat-option with dynamic data ( adding / removing ) not working as it should

Issue

I'm currently working on a stepper component which is meant to add and remove objects, to keep the user experience up i want to work with the mat-select component. So when as shown in the example a doctor is added the doctor object is appended to the options array and the value which is bound to the component should update, and the selector should switch to the newly added Object.

The issue here is the selected option is getting changed, the default value too which is bound to the selector, the selector just deselects the selected value and doesn't re select anything it just stays blank. The same thing happens in every component which is built up like this.

HTML (Selector)

<mat-form-field
  class="form-field"
  ngDefaultControl
  [appearance]="appearance"
  [formControl]="formControl">
  <mat-label>
    Doktor
  </mat-label>
  <mat-select ngDefaultControl [(value)]="defaultValue" [compareWith]="compare">
    <mat-option *ngFor="let doctor of options" [value]="doctor" (onSelectionChange)="handleSelectionChange($event, doctor)">{{"Doktor " + (options.indexOf(doctor) + 1)}}</mat-option>
  </mat-select>
</mat-form-field>

HTML (dynamic form)

    <div *ngIf="options.length > 0; else listIsEmpty">
  <div *ngFor="let doctor of options" class="filter-view-complete-wrapper">
    <div [hidden]="doctor != selectedOption" class="filter-view-each-wrapper">
      <mat-divider class="form-field"></mat-divider>
      <div class="filter-view-form-wrapper">
        <km-doctor-form
          [formComponent]="formComponent"
          [buttonsEnabled]="false"
          [doctor]="doctor"
          (valueChanged)="emitObject($event)"
          [stepperMode]="true"
          [readOnly]="false">
        </km-doctor-form>
      </div>
      <button
        mat-raised-button
        color="primary"
        (click)="removeDoctor(doctor)">
        <mat-icon>
          remove
        </mat-icon>
        {{'kita-manager.information-adjustment.remove-doctor' | translate}}
      </button>
      <mat-divider class="form-field"></mat-divider>
    </div>
  </div>
</div>

OnInit (value selection)

  ngOnInit(): void {
this.options = this.occupancies.map(occupancy => occupancy?.child.doctor).filter(item => !!item);
this.defaultValue = this.options[0];
this.selectedOption = this.defaultValue;
this.removeDuplicateDoctors();
this.setupFilter();

}

Removing and appending (component)

selectOption just sets this.selectedOption

  addDoctor() {
this.options.push({} as DoctorShowDto);
const value = this.options[this.options.length - 1];
this.defaultValue = value;
this.selectOption(value);

}

  removeDoctor(doctor: DoctorShowDto) {
const index = this.options.indexOf(doctor);
this.options.splice(index, 1);
const value = this.options[index - 1];
this.defaultValue = value;
this.selectOption(value);

}

UPDATE

i also tried working with the ViewChild MatSelect and its methods like write value, or assign the value etc. but shouldn't that be the same thing as binding the value. i really don't understand why its not working.

AND i also found out that this only happens on new, empty pushed objects, i'm starting to have a feeling that it's about the compare function. The one's the component was initialized with are selected no with no problems.

Thank you for all answers in advance :D

SOLUTION

After searching for a while i found that the compare function was id based, the objects are created in the frontend so they do not have such an key value id, so i just implemented a compareByName function which essentially does the same with first and last name.

Solution

After searching for a while i found that the compare function was id based, the objects are created in the frontend so they do not have such an key value id, so i just implemented a compareByName function which essentially does the same with first and last name.

public compareByName(o1, o2): boolean {
  return o1?.firstname === o2?.firstname && o1.lastname === o2.lastname;
}

Answered By - cmedi32