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

Question

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

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

我有一个表格如下：

<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

提前感谢。。。！！！

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

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

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

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

如果不清楚，请评论，我会回复你的。

Answer 2

不能在同一材料组件上使用[(value(]和formControlName。它不守规矩。

并在getSelectedData函数中将this.selectedType=response.data[0].name更新为this.selectType=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)
}
}
}

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