时间戳

首页 > 解决方案 > Angular 6：无法在 selectionChange 事件中获取选定的值

angular - Angular 6：无法在 selectionChange 事件中获取选定的值

问题描述

在我的编辑表单中，我无法检索在添加时存储的值。流程就像第一个选择框的选项被选中后，它的相关数据将显示在下一个选择框中。

我已经为选定的值尝试了这个答案，但没有显示这些值。

我有一个如下表格：

<form [formGroup]="productForm" (ngSubmit)="onSubmit()">
    <mat-form-field">
      <mat-label>Main Type</mat-label>
      <mat-select [(value)]="selectedType" (selectionChange)="onTypeChange($event.value)"
        formControlName="mainTypeId">
        <mat-option *ngFor="let list of mainList" [value]="list.id">{{list.name}}</mat-option>
      </mat-select>
    </mat-form-field>
    <mat-form-field">
      <mat-label>Sides Type</mat-label>
      <mat-select [(value)]="selectedSide" formControlName="sideTypeId">
        <mat-option *ngFor="let list of sidesList" [value]="list.id">{{list.name}}
        </mat-option>
      </mat-select>
    </mat-form-field>
</form>

EditProductComponent.ts

export class EditProductUploadImageComponent implements OnInit {
    public selectedType: any;
  public selectedSide: any;

  constructor(private fb: FormBuilder,
    private productService: ProductService) {
    this.formInitialization();
    this.getSelectedData()
  }

    getSelectedData() {
    this.productService.getProductDesignRef(this.data.editId).subscribe((response: any) => {
        this.refrences = response.data[0]
        console.log(this.refrences)
        this.productService.getMainListById(this.refrences.main_type_id).subscribe((response: any) => {
          this.selectedType = response.data[0].id
          this.getMainTypeList()
          if(response) {
            this.productService.getSidesListById(this.refrences.sides_type_id).subscribe((response: any) => {
              this.selectedSide = response.data[0].id
              this.onTypeChange(1)
            })
          }
        })
    })
  }

  getMainTypeList() {
    this.productService.getMainTypeList().subscribe((response: any) => {
      if (response) {
        this.mainList = response.data;
        console.log(this.mainList)
      }
    }
  }

  onTypeChange(value: number) {
    this.productService.getSidesTypeListById(value).subscribe((response: any) => {
      if (response) {
        this.mainTypeListById = response['data']['0']['sides-type'];
        this.sidesList = this.mainTypeListById
        console.log(this.sidesList)
      }
    }
  }
}

=> 通过使用参考 ID，我在表单中传递了一个选定的值。但无法获得正确的输出。

请查看此jsfiddle 链接中的所有控制台日志

有关更多说明，请查看这两个有关工作流程的图像。

  1. 记录列表：https ://prnt.sc/rw2ucu ；单击编辑按钮时，将打开一个编辑窗口，我希望列表页面中列出的两个值用于更新记录。
  2. 编辑对话框：https ://prnt.sc/rw2xeh

提前致谢...！！！

标签： angularangular-material

解决方案

我刚刚注意到您正在使用反应形式。

<!-- why are you using value and formControlName & why you passing $event.value in your method? -->
<mat-select 
   [(value)]="selectedType" 
   (selectionChange)="onTypeChange($event.value)"
   formControlName="mainTypeId"
>

<!-- when you are using reactive forms you can just access mainTypeId in your onTypeChange method -->
<mat-select 
   (selectionChange)="onTypeChange()"
   formControlName="mainTypeId"
>

// your method
onTypeChange() {
   // your access mainTypeId here directly like this
   const mainTypeId = this.yourFormName.get('mainTypeId').value;
}

如果上述方法不适用于您的编辑案例，您可以使用 [compareWith] 轻松处理您的编辑案例。

如果您没有使用反应形式：

  1. 首先，我在您的 onTypeChange 方法中看不到任何值的使用。
  2. 在这里 (selectionChange)="onTypeChange($event.value)" 您不必传递 $event.value 因为对于您已经在 selectedType 中设置的值
  3. 您只需要在 onTypeChange 方法中访问 this.selectedType

如果不清楚，请发表评论，我会尽快回复您。

推荐阅读