web-dev-qa-db-fra.com

Angular Liaison de données dynamiques de sélection de mat de matériau dans Angular

J'utilise Angular 6 and Angular Material. Lorsque je clique sur le bouton Edit, les valeurs Secondary, SSC et Male seront initialisées sur la sélection. Mais je peux pas en mesure de le faire. Je ne peux afficher la valeur masculine dans le menu déroulant qu'après avoir cliqué sur le bouton Modifier. Je veux donc afficher toutes les valeurs dans le menu déroulant et passer l'objet pour la sélection dynamique. Merci.

Mon lien de code ici: lien stackblitz

angularangular-materialangular6angular-material-6
3
monir tuhin

Vous pouvez essayer avec cette solution

J'ai créé une démo sur 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>
10
Krishna Rathore

dans votre code, vous liez l'objet à [valeur] afin qu'il ne puisse pas le lier correctement, si vous changez votre valeur en chaîne comme vous l'avez fait dans la section genre, cela sera OK, par exemple:

en changeant [value] de education qui est un objet à education.educationLevelName c'est une chaîne et maintenant elle fonctionne correctement.

<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>
3
Fateme Fazli