SelectionChange mat-select Angular 上的偏移

Question

I have a dropdown menu and when I select a element of this dropdown I want to extract all its data.

My .ts is :

completeInputAgencyAndVersion(event: MatSelectChange) {
 if (event.value > 0) {
   this.service.getCodeList(event.value).subscribe(val => { this.currCodeList = val; });
   if (this.currCodeList) {
     this.contextScheme.schemeId = this.currCodeList.listId.toString();
     this.contextScheme.schemeAgencyId = this.currCodeList.agencyId.toString();
     this.contextScheme.schemeVersionId = this.currCodeList.versionId.toString();
    // this.contextScheme.ctxSchemeValues = this.convertCodeListValuesIntoContextSchemeValues(this.currCodeList.codeListValues);
     this._updateDataSource(this.convertCodeListValuesIntoContextSchemeValues(this.currCodeList.codeListValues));
    // this.dataSource.data = this.contextScheme.ctxSchemeValues;
    }
 } else {
 this.contextScheme.schemeId = '';
 this.contextScheme.schemeAgencyId = '';
 this.contextScheme.schemeVersionId = '';
 this._updateDataSource([]);
 }
}

And my .html is :

  <mat-form-field>
    <mat-select placeholder="Code List" [(ngModel)]="contextScheme.codeListId" (selectionChange)="completeInputAgencyAndVersion($event)">
      <mat-option [value]="0"> None </mat-option>
      <mat-option *ngFor="let codeList of codeListsFromCodeList" [(value)]="codeList.codeListId">
        {{codeList?.codeListName}}
      </mat-option>
    </mat-select>
  </mat-form-field>

Everything is working fine except that since I m using the selectionChange method of mat-select , when I chose the first value, it s not understood as a change and therefore nothing happens. Then after that when I select another element, it just get the correct information but from the last selection, basically bc of the selectionChange.

I have already posted on stack : Offset selectionChange Angular you can check for further information.

Thank you .

Answer 1

I'm not sure i've fully understood what you mean, but you'll get the data throught [(value)] .

If you're looking for codeList , you can you just change:

[(value)]="codeList.codeListId" to [(value)]="codeList" .

Like this it should pick your codeList

Answer 2

It was not the selectionChange it was the subscribe that were async. I had to add another async method to fix it and now it works. Thanks !