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

Question

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

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

我的表格如下：

<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 link 中的所有控制台日志

如需更多说明，请查看这两张关于工作流程的图片。

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

提前谢谢...！！！

Answer 1

我刚刚注意到您正在使用响应式表单。

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

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

Answer 2

您不能在同一个材质组件上使用 [(value)] 和 formControlName。它不正常。

并在 getSelectedData 函数中将 this.selectedType = response.data[0].name 更新为 this.selectedType = response.data[0].id

您没有在函数 onTypeChange

中使用选定的值

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

您必须使用 价值 才能看到影响。