javascript - Angular Material 垫选择 : values are function with submit button

Question

在 mat-select 中，值是函数 report()、edit()、delete() ，然后当我单击提交按钮时，所选值 (function) 应该运行。我该怎么做？

I am working for the delete() function for now, once I understand the flow, the rest will be easy for me.

component.html 文件

<ng-container matColumnDef="instrumentName">
   <mat-header-cell *matHeaderCellDef class="header-cell">Instrument Name</mat-header-cell>
   <mat-cell *matCellDef="let element" class="cell">{{ element.instrumentName }}</mat-cell>
</ng-container>

<ng-container matColumnDef="manufacturer">
   <mat-header-cell *matHeaderCellDef class="header-cell">Manufacturer/Model</mat-header-cell>
   <mat-cell *matCellDef="let element" class="cell">{{ element.manufacturer }}</mat-cell>
</ng-container>

<ng-container matColumnDef="_id">
   <mat-header-cell *matHeaderCellDef class="header-cell">Options</mat-header-cell>
      <mat-cell *matCellDef="let element" class="cell">
          <mat-select placeholder="options" [value]>
            <mat-option value="report()">Report</mat-option>
            <mat-option value="edit()">Edit</mat-option>
            <mat-option value="delete()">Delete</mat-option>
          </mat-select>
          <button class="submit-btn" mat-button type="submit">Submit</button>
      </mat-cell>
</ng-container>

component.ts 文件

delete(instrument: Instruments) {
    this.equipmentService.deleteInstrument(instrument)
      .subscribe(() => console.log('successfully deleted'));
  }

component.service.ts 文件

deleteInstrument(instrument: Instruments) {
    return this.http.delete<Instruments>(`${this.apiBaseUrl}/equipment/${instrument._id}`);
  }

Answer 1

您可以在 select 元素上使用两种方式的数据绑定(bind)，并在按下 submit 时通过 switch case 运行选择。

HTML

<mat-select placeholder="options" [(value)]="selection">
    <mat-option value="report">Report</mat-option>
    <mat-option value="edit">Edit</mat-option>
    <mat-option value="delete">Delete</mat-option>
</mat-select>

<button (click)="runSelectedFunction()" class="submit-btn" mat-button type="submit">Submit</button>

TS

export class YourClass{
  selection: string = 'report';

  report() {
    console.log('report');
  }

  edit() {
    console.log('edit');
  }

  delete() {
    console.log('delete');
  }

  runSelectedFunction() {
    switch (this.selection) {
      case 'report':
        this.report();
        break;
      case 'edit':
        this.edit();
        break;
      case 'delete':
        this.delete();
        break;
    }

  }
}

Working demo