如何同时获取角材料多重选择字段的值和文本

Question

我需要从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将推入另一个数组，但根据我的情况，每个选择都将出现相同的值。

Answer 1

这里有一些变化

Answer 2

尝试一下，示例项目https://stackblitz.com/angular/baqlybrarro?file=src%2Fapp%2Fselect-multiple-example.ts