Angular Mat-множественный выбор, получение данных из выпадающего списка

Question

HTML:
  <mat-form-field>
  <mat-label>Choose terms</mat-label>
  <mat-select [formControl]="termlist" multiple>
  <mat-option required *ngFor="let term of terms" [value]="term.termName"  
  >
  {{term.termName}}
  </mat-option>
  </mat-select>
  </mat-form-field>
  <button mat-flat-button color="primary" 
  (click)="openSelectComponent()">Continue</button>    

Файл машинописного текста:

     termlist = new FormControl();
       terms: Term;
       constructor(private termHttpService: TermHttpService, private router: 
       Router) { }
       ngOnInit() {
       this.termHttpService.get().subscribe(result => {
      this.terms = result;
      console.log(result);
    });

  }
  openSelectComponent() {
    this.router.navigate(['/termselected'])
  }
}

Итак, суть в том, как получить значения из множественного выбора (условия) и передать их следующему компоненту?

Итак, данные отсюда:

https://gyazo.com/49bbcddf17bee2f44d7a1a4579568ee0

Как мне попасть в эти выбранные значения?

Answer 1

Попробуйте это решение:

term.html

<mat-form-field appearance="outline">
  <mat-label>Select Term</mat-label>
  <mat-select name="term" 
     [(ngModel)]="selectedTerm" multiple>
      <mat-option *ngFor="let term of termsList"
         [value]="term">{{term.name}}</mat-option>
   </mat-select>
</mat-form-field>

term.component.ts

import {ITerms} from "app/shared/model/term.model";
termsList: ITerms[];
originalTerm: ITerms[] = [];
selectedTerms: ITerms[] = [];

openSelectComponent(){
    this.originalTerm = [];
    if(this.terms.length > 0){
       let data: ITerms[] = [];
       this.terms.forEach((ele) => {
          data.push(ele.term);
          this.originalTerm.push(ele.term);
       });  
    }
}

term.model.ts

export interface ITerms {
    id?: number;
    name?: string;
}
export class Terms implements ITerm {
    constructor(
        public id?: number,
        public name?: string,
    ) {}
}

Answer 2

Добавить событие OnSelectionChange при выборе -

ваш HTML

 <mat-form-field>
  <mat-label>Choose terms</mat-label>
  <mat-select [formControl]="termlist" multiple>
  <mat-option (onSelectionChange)="getValues($event)" required *ngFor="let term of terms" [value]="term.termName"  
  >
  {{term.termName}}
  </mat-option>
  </mat-select>
  </mat-form-field>
  <button mat-flat-button color="primary" 
  (click)="openSelectComponent()">Continue</button>  

your component.ts

 getValues(event: {
    isUserInput: any;
    source: { value: any; selected: any };
  }) {
    if (event.isUserInput) {
      if (event.source.selected === true) {
        console.log(event.source.value)
      } else {
        console.log(event.source.value)
      }
    }
  }

Примечание : event.source.selected === true определено, checkbox проверено

Answer 3

HTML:

<mat-select multiple (ngModel)]="mySelection">

mySelection должен быть объявлен в вашем компоненте.

public mySelection: NgModel;