Angular Material mat-select динамическая привязка данных в Angular - PullRequest
Новая
       43

Angular Material mat-select динамическая привязка данных в Angular

0 голосов
/ 02 июля 2018

Я использую Angular 6 и Angular Material. Когда я нажимаю на кнопку «Редактировать», вторичные, SSC и мужские значения будут инициализированы при выборе. Но я не могу этого сделать. Я могу показать значение «Мужчина» только в раскрывающемся списке после нажатия кнопки «Изменить». Поэтому я хочу показать все значения в раскрывающемся списке и передать объект для динамического выбора. Спасибо.

Мой код ссылки здесь: ссылка на стек

Ответы [ 2 ]

0 голосов
/ 02 июля 2018

Вы можете попробовать это решение

Я создал демо на 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>
0 голосов
/ 02 июля 2018

в вашем коде вы привязываете объект к [value], поэтому он не может связать его правильно, если вы измените свое значение на string, как вы делали в разделе пол, все будет в порядке, например:

изменив [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>
...