偏移选择更改角度

Question

我有一个包含 1 个下拉列表和 2 个输入的表单。 我有一个包含多个对象的下拉列表。当我选择其中一个时，我可以检索整个对象，并且应该用所选对象的值填充另外两个输入。 但是，当我这样做时似乎有一个偏移量。

例如，我的列表中有一个对象香蕉。如果我选择它，什么都不会发生。

其他 2 个输入最初不会被填充。然后，如果我选择另一个对象，例如苹果，将检索香蕉值，以此类推，如果我选择橙色，将检索苹果的值。

在我的 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 文件中我有 方法完成输入：

  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

您的问题与 Angular Change Detection 有关，一旦您获得异步数据，该问题就不会发生。一旦响应来自服务器，您可以通知角度检查更改。

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();
 }
       } );

}