Смещение выделенияИзменение угла

Question

У меня есть форма, которая содержит 1 раскрывающийся список и 2 ввода. У меня есть выпадающий список, который содержит несколько объектов. Когда я выбираю один из них, я могу получить весь объект, и я должен заполнить два других ввода значением из выбранного объекта. Тем не менее, кажется, есть смещение, когда я это делаю.

Например, в моем списке есть объект банан. Если я выберу его, ничего не произойдет.

Сначала два других входа не будут заполнены. Затем, если я выберу другой объект, такой как яблоко, будут извлечены значения бананов, и так далее, если я выберу Оранжевый, будут получены значения Apple.

В моем файле HTML у меня есть это:

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

  <mat-form-field>
    <mat-label>Scheme ID</mat-label>
    <input matInput required 
         [(ngModel)]="contextScheme.schemeId" [maxlength]="45"/>
  </mat-form-field>

  <mat-form-field>
    <mat-label>Agency ID</mat-label>
    <input matInput required 
     [(ngModel)]="contextScheme.schemeAgencyId" [maxlength]="45"/>
  </mat-form-field>

В основном я только отображаю все, и в файле TS у меня есть Метод completeInput:

  completeInputAgencyAndVersion(event: MatSelectChange) {
     this.service.getCodeList(event.value).subscribe(val => { 
       this.currCodeList = val; } );
       if (this.currCodeList) {
          this.contextScheme.schemeAgencyId = 
            this.currCodeList.agencyId.toString();
          this.contextScheme.schemeVersionId = 
           this.currCodeList.versionId.toString();
          this.contextScheme.ctxSchemeValues = 
          this.convertCodeListValuesIntoContextSchemeValues(
             this.currCodeList.codeListValues);
          this.dataSource.data = this.contextScheme.ctxSchemeValues;
 }
}

Мой вопрос: почему существует это смещение и как его исправить?

Спасибо!

РЕДАКТИРОВАТЬ: Всякий раз, когда я выбирал объект из раскрывающегося списка, я вижу, что правильный запрос отправляется и что я получаю правильную часть информации, проблема рассматривается в Angular и как он загрузить информацию.

Answer 1

Ваша проблема связана с обнаружением угловых изменений, которое не происходит после получения асинхронных данных. Вы можете уведомить угловую проверку об изменении, как только ответ пришел с сервера.

constructor(private cd: ChangeDetectorRef) {
}

completeInputAgencyAndVersion(event: MatSelectChange) {
     this.service.getCodeList(event.value).subscribe(val => { 
       this.currCodeList = val; 
        if (this.currCodeList) {
          this.contextScheme.schemeAgencyId = 
            this.currCodeList.agencyId.toString();
          this.contextScheme.schemeVersionId = 
           this.currCodeList.versionId.toString();
          this.contextScheme.ctxSchemeValues = 
          this.convertCodeListValuesIntoContextSchemeValues(
             this.currCodeList.codeListValues);
          this.dataSource.data = this.contextScheme.ctxSchemeValues;
          this.cd.detectChanges();
 }
       } );

}