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文件中，方法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();
 }
       } );

}

偏移选择更改角度

1 个答案: