偏移选择Change Angular [英] Offset selectionChange Angular

问题描述

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

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

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

<块引用>

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

 <mat-select placeholder="代码列表"(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>方案 ID</mat-label><输入 matInput 需要[(ngModel)]="contextScheme.schemeId" [maxlength]="45"/></mat-form-field><mat-form-field><mat-label>Agency ID</mat-label><输入 matInput 需要[(ngModel)]="contextScheme.schemeAgencyId" [maxlength]="45"/></mat-form-field>

<块引用>

基本上我只显示所有内容，并且在 ts 文件中我有方法完成输入:

 completeInputAgencyAndVersion(event: MatSelectChange) {this.service.getCodeList(event.value).subscribe(val => {this.currCodeList = val;});如果(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 中以及如何它加载信息.

解决方案

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

constructor(private cd: ChangeDetectorRef) {}completeInputAgencyAndVersion(事件:MatSelectChange){this.service.getCodeList(event.value).subscribe(val => {this.currCodeList = val;如果(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();}});}

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.

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.

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>

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 ?

Thanks !

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.

解决方案

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

}

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