首页 文章

Angular Material mat选择Angular中的动态数据绑定

提问于
浏览
1

我正在使用Angular 6和Angular Material . 当我单击“编辑”按钮时,将在选择中初始化辅助,SSC和男性值 . 但我无法做到这一点 . 单击“编辑”按钮后,我只能在下拉列表中显示“男性”值 . 所以我想在下拉列表中显示所有值,并为动态选择传递对象 . 谢谢 .

我的代码链接在这里:stackblitz link

3 回答

  • 1

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

    我在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>
    
  • 6

    我们如何动态设置多项选择选项的角度材料中的复选框?我应该能够在列表中已选中的下拉列表中选中已选中的复选框 .

  • 1

    在你的代码中你绑定对象[value]所以它不能正确绑定它,如果你将你的值更改为字符串就像你在性别部分中所做的那样可以,例如:

    educationeducation 更改为 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>
    

相关问题