Question

我有一堆mat-select像这样：

  <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>

现在，我要发送带有按钮的(click)事件的选定值：

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

如何获取事件处理程序函数的下拉菜单的两个值？谢谢！

Answer 1

您只需将 ngModel 添加到“选择”下拉列表中即可。

 <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>

在按钮功能中，将其更改为以下内容

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

Answer 2

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

单击按钮将所选值从Mat-Select发送到控制器

2 个答案: