Offset on a 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 .

As you has all your data in codeListsFromCodeList, you always can use let data=this.codeListsFromCodeList.find(x=>x.codeListId==this.contextScheme.codeListId) — Eliseo
You mean to use this, instead of the subscribe right? I ll give a go and I ll let you know. Thanks ! — Sox -
No, when you call to change, you has the value or in $event or in the [(ngModel)]. As you has the "id", and you has an array of object it's only find the object in the array — Eliseo

Joël-Etienne Joël-Etienne · Accepted Answer · 2019-02-14T16:24:07

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

Offset on a SelectionChange mat-select Angular

2 Answers