Send selected values from mat-select to controller on button click

Question

I have a bunch of mat-select s like this:

  <mat-form-field>
    <mat-label>KPI</mat-label>
    <mat-select>
      <mat-option *ngFor="let kpi of KpiList" [value]="kpi">{{ kpi.name }}</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field>
    <mat-label>Modifier</mat-label>
    <mat-select>
      <mat-option *ngFor="let modifier of ModifierList" [value]="modifier">{{ modifier }}</mat-option>
    </mat-select>
  </mat-form-field>

Now, I want to send the selected values with a (click) event of a button:

  <button mat-button (click)="addComponent(data)">Add Component</button>

How do I get both values of the dropdowns to the event handler function? Thanks!

Answer 1

you can simply add ngModel to the Select dropdowns.

 <mat-form-field>
    <mat-label>KPI</mat-label>
    <mat-select [(ngModel)]="kpiValue">
      <mat-option *ngFor="let kpi of KpiList" [value]="kpi">{{ kpi.name }}</mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field>
    <mat-label>Modifier</mat-label>
    <mat-select [(ngModel)]="modifierValue">
      <mat-option *ngFor="let modifier of ModifierList" [value]="modifier">{{ modifier }}</mat-option>
    </mat-select>
  </mat-form-field>

In your button function change to something like below

 <button mat-button (click)="addComponent(kpiValue,modifierValue)">Add Component</button>

Answer 2

尝试将两个下拉列表的值绑定到一个对象，然后将同一对象传递给事件。