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>

=>通过使用引用ID，我在表单中传递了一个选定的值。但不能得到适当的输出

请查看本文档中的所有控制台日志

欲了解更多信息，请查看这两张关于工作流程的图片

记录清单：；当点击编辑按钮时，一个编辑窗口将打开，我希望在列表页面中列出两个用于更新记录的值

“编辑”对话框：

提前感谢

不能在同一材质组件上使用[（值）]和formControlName。它不正常

并更新此。selectedType=response.data[0]。将其命名为。selectedType=response.data[0]。id位于getSelectedData函数中

您没有在函数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)
     }
   }
}

---

您必须使用值来查看影响

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

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

//你的方法
onTypeChange（）{
//您的访问mainTypeId直接如下所示
const mainTypeId=this.yourFormName.get（'mainTypeId'）.value；
}

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

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

第一件事是，我看不出你的工作有任何价值 onTypeChange方法

在这里（selectionChange）=“onTypeChange（$event.value）”您不必 传递$event.value，因为对于已在selectedType中设置的值

您只需要访问此。在onTypeChange方法中选择的类型

---

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

在我的实际代码中，我已经传递了一个值参数，当我单击第一个选择时，它会产生影响。。。但在这里，我的要求是，当我加载编辑表单时，应检索添加的值。您是否在某处设置此“selectedType”？您正在分配字符串，并且在HTML中使用id作为值。更改此。selectedType=response.data[0]。名称为。selectedType=response.data[0]。id或您可以创建堆栈BlitzHello，先生，这里有一个stackblitz链接：P.S：我没有了解如何在stackblitz中更新api调用，并且删除了旧的注释，这样线程就不能超过。不工作，先生。。。我想知道为什么没有任何解决办法。我创造了这个；也许你能对流程有更好的了解。那太好了，我会在30分钟或更短的时间内给你回复。谢谢你，先生。欲了解更多信息，请查看这两张关于工作流程的图片。1） 记录清单：；当点击编辑按钮时，一个编辑窗口将打开，我希望在列表页面中列出两个用于更新记录的值。2） 编辑对话框：已共享的stackblitz链接。应用程序似乎被破坏了。您应该设置最小的代码结构。为了解决您的问题，我可以与您进行缩放通话，您可以共享您的屏幕，我可以帮助您查找问题。它现在正在工作，先生，您的答案如上所述。。。！！！我再次检查了这些步骤，并解决了对象键名称中的更改。非常感谢。干杯

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