Я использую Angular 6 и Angular Material. Когда я нажимаю кнопку «Изменить», при выборе будут инициализированы значения Secondary, SSC и Male. Но я не могу этого сделать. Я могу показать значение Male в раскрывающемся списке только после нажатия кнопки Edit. Итак, я хочу показать все значения в раскрывающемся списке и передать объект для динамического выбора. Спасибо.
Ссылка на мой код здесь: stackblitz link < / а>
Вы можете попробовать это решение
Я создал демонстрацию на 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>
в вашем коде вы привязываете объект к [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>
