如何获取角度材料多选字段的值和文本答案

【问题标题】：How to get both value and text of angular material multi selection field如何获取角度材料多选字段的值和文本
【发布时间】：2020-03-09 07:45:21
【问题描述】：

我需要从 Angular 材质多选选项中同时选择 value and its text。我在下面解释我的代码。

<mat-form-field appearance="outline">
   <mat-label>Grade</mat-label>
     <mat-select
        placeholder="Grade" 
        aria-label="Grade"
        formControlName="Grade"
        (selectionChange)="selectedGrade($event)"
        multiple
        required
     >
     <mat-option *ngFor="let s of gradeCodes" [value]="s.Code">
          <span *ngIf="!s.Name">
          </span>
          <span *ngIf="s.Name">
              {{s.Name}}
          </span>
     </mat-option>
   </mat-select>
</mat-form-field>

selectedGrade(event: any) {
    console.log('event', event);
    let target = event.source.selected[0]._element.nativeElement;
    let value = event.value[0];
    let obj = {
      code: value,
      level: target.innerText.trim()
    }
    this.selectedLevel.push(obj);
    console.log('grade', this.selectedLevel);
  }

在这里，我的下拉菜单有多个选择选项。当用户从下拉列表中选择第一个值时，我需要相关的 value and text 将推入另一个数组，但根据我的情况，每个选择中都会出现相同的值。

【问题讨论】：

能否请您分享gradeCodes对象给我一个样本？
@errorau：this.gradeCodes=[{Name:'Nurserry',Code:'A'},{Name:'Grade1',Code:'B'},{Name:'Grade2',Code:'C'}]。这是一个示例 fdata。

标签： angular dropdown

【解决方案1】：

这里有一些变化

 <mat-option *ngFor="let s of gradeCodes" [value]="s">

您需要使用 compareWith 属性进行 mat-select compareWith documentation

<mat-form-field appearance="outline">
   <mat-label>Grade</mat-label>
     <mat-select
        placeholder="Grade" 
        aria-label="Grade"
        formControlName="Grade"
        (selectionChange)="selectedGrade($event)"
        multiple
        required
     >
     <mat-option *ngFor="let s of gradeCodes" [value]="s">
          <span *ngIf="!s.Name">
          </span>
          <span *ngIf="s.Name">
              {{s.Name}}
          </span>
     </mat-option>
   </mat-select>
</mat-form-field>

selectedGrade(event: any) {
    console.log('event', event);
    let target = event.source.selected[0]._element.nativeElement;
    let value = event.value[0];
    let obj = {
      code: value,
      level: target.innerText.trim()
    }
    this.selectedLevel.push(obj);
    console.log('grade', this.selectedLevel);
  }

【讨论】：

【解决方案2】：

我认为这样会容易得多：

<mat-form-field appearance="outline">
    <mat-label>Grade</mat-label>
    <mat-select placeholder="Grade" aria-label="Grade" formControlName="Grade" (selectionChange)="selectedGrade($event)"
        multiple required>
        <mat-option *ngFor="let s of gradeCodes" [value]="s.Code">
            <!-- If name is undefined it won't display a thing -->
            <span>{{s.Name}}</span>
        </mat-option>
    </mat-select>
</mat-form-field>

selectedGrade(event: any) {
    const code: number = event.value[0];
    const grade = this.gradeCodes.find(grade => grade.code === code)
    const obj = {
        code: code,
        level: grade.Name
    }
    this.selectedLevel = [...this.selectedLevel, obj];
}

请记住，不更改数组引用不会触发 Angular 的更改检测，并且不会显示数据

【讨论】：