角度材质在角度中选择动态数据绑定

Question

我正在使用Angular 6和Angular Material。当我单击编辑按钮时，辅助，SSC和男性值将在选择中初始化。但我做不到。我只能在单击"编辑"按钮后在下拉列表中显示男性值。所以我想在下拉菜单上显示所有值，并为动态选择传递对象。谢谢。

我的代码链接在这里：堆栈闪电战链接

Answer 1

您可以尝试使用此解决方案

我已经在堆栈闪电战上创建了一个演示

组件.ts

editInfo(educationInfo) {
this.education_level = educationInfo.aa;
this.exam_title = educationInfo.bb;
this.gender = educationInfo.cc;
this.educationLevelChangeAction(this.education_level);
}
educationLevelChangeAction(education) {
this.exam_title = "";
let dropDownData = this.educationList.find((data: any) => data.educationLevelName === education);
if (dropDownData) {
this.degreeTitleList = dropDownData.degreeTitleList;
} else {
this.degreeTitleList = [];
}
}

组件.html

<mat-form-field>
<mat-select placeholder="Select Level of Education" name="education_level" (selectionChange)="educationLevelChangeAction(education_level)" [(ngModel)]="education_level" >
<mat-option *ngFor="let education of educationList" [value]="education.educationLevelName" >{{ education.educationLevelName }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Select Exam/Degree Title" name="exam_title" [(ngModel)]="exam_title">
<mat-option *ngFor="let degreeTitle of degreeTitleList" [value]="degreeTitle">{{ degreeTitle }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-select [(ngModel)]="gender">
<mat-option *ngFor="let gender of genderList" [value]="gender">{{ gender }}</mat-option>
</mat-select>
</mat-form-field>

<p>You selected: {{education_level}}  {{exam_title}} {{gender}}</p>

Answer 2

在您的代码中，您将对象绑定到 [value]，因此它无法正确绑定它，如果您像在性别部分中所做的那样将值更改为字符串就可以了，例如：

将[value]从对象education更改为字符串education.educationLevelName现在它可以正常工作。

<mat-form-field>
<mat-select placeholder="Select Level of Education" name="education_level" (selectionChange)="educationLevelChangeAction(education_level)" [(ngModel)]="education_level" >
<mat-option *ngFor="let education of educationList" [value]="education.educationLevelName" >{{ education.educationLevelName }}</mat-option>
</mat-select>
</mat-form-field>