Как получить как значение, так и текст поля выбора материала angular

Question

Мне нужно выбрать оба варианта value and its text из Angular материала множественного выбора. Я объясняю мой код ниже.

<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 превратит pu sh в другой массив, но в моем случае одно и то же значение приходит в каждом выборе.

Answer 1

Вот некоторые изменения

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

Вам необходимо использовать compareWith свойство для выбора матов сравнить с документацией

<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);
  }

Answer 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 не будет изменено, а данные не будут отображаться

Answer 3

Попробуйте это, пример проекта https://stackblitz.com/angular/baqlybrarro?file=src%2Fapp%2Fselect-multiple-example.ts

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


 interface obj  {
   Code:number;
  Name:string;
  Level:number;
 }


 selectedArray: obj[] = [];

selectedGrade(event:any) {
  //every select push event element pushh an array for this i reset selected array 
  this.selectedArray = [];
   console.log("Event "+ JSON.stringify(event.value));
   let _array = event.value as obj;
   this.selectedArray.push(_array)
   //Here is you selectedArray
   console.log(this.selectedArray)
}