Angular Material mat-select Angular 中的动态数据绑定

Question

我正在使用 Angular 6 和 Angular Material。当我单击“编辑”按钮时，Secondary、SSC 和 Male Value 将在 select 上初始化。但我做不到。单击编辑按钮后，我只能在下拉列表中显示男性值。所以我想在下拉列表中显示所有值并传递动态 selection 的对象。谢谢

我的代码 link 在这里：stackblitz link

Answer 1

在您的代码中，您将对象绑定到 [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>

Answer 2

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

我已经在 Stackblitz

上创建了一个演示

Component.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 = [];
    }

  }

Component.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>

Angular Material mat-select Angular 中的动态数据绑定

Angular Material mat-select dynamic data binding in Angular

angular-material

angular

angular6

angular-material-6