偏移选择更改角度 [英] Offset selectionChange Angular

问题描述

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

I have a form which contains 1 drop-down list and 2 inputs. I have a drop down list which contains several objects. When I select one of them, I can retrieve the whole object and I am supposed to filled the two other inputs with the value from the selected object. However, it seems there is an offset when I do that.

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

For instance I have an object banana in my list. If i select it nothing will happen.

其他2个输入将首先不填充.然后，如果我选择另一个对象(例如苹果)，则将检索香蕉值，如果我选择橙色"，则将检索苹果的值.

The 2 other inputs will not be filled at first. Then if I select another object such as apple, the banana values will be retrieved and so on if I select Orange, Apple's values will be retrieved.

在我的HTML文件中，有这个内容:

In my HTML file I have this :

      <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:

Basically I only display everything and in the ts file I have the method 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;
 }
}

我的问题是为什么会有这个偏移量，我该如何解决?

My question is why is there this offset and how can I fix it ?

谢谢！

每当我从下拉列表中选择一个对象时，我都可以看到发送了正确的请求，并且收到了正确的信息，问题仍然存在于Angular中，以及如何解决.它会加载信息.

EDIT : Whenever I chose an object from my drop-down list, I can see that the correct request is sent and that I receive the correct piece of information, the issue dwells in Angular and how it load the information.

推荐答案

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

Your issue is related to Angular Change Detection which is not happening once you get your async data. You can notify angular check for change once response had come from server.

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

}

这篇关于偏移选择更改角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！