Question

看起来很简单，尽管这让我很困惑。

这有效：

   <select (change)="onStatusChange($event)">
          <option value="0">--{{ hello.status }}--</option>
          <option value="pending" href="pendingHello()">Pending</option>
          <option value="running" href="startHello()">Running</option>
          <option value="completed" href="completeHello()">Completed</option>
        </select>

但是，在应用Material标签后，Change事件不会保留。也就是说，状态在材料版本中保持不变：

      <mat-form-field>
          <mat-select (OnSelectionChange)="onStatusChange($event)">
            <mat-option [value]="pending" href="pendingHello)"
              >Pending1
            </mat-option>
            <mat-option [value]="running" href="startHello()"
              >Running</mat-option
            >
//there are more options but stopping at 2 for example purposes
          </mat-select>
        </mat-form-field>

理想情况下，我想从现有服务中退出，但是现在这是MVP。感谢您的帮助！

Answer 1

如果您的mat-option是硬编码的，则必须使用(selectionChange)并使用value而不是[value]：

<mat-form-field>
    <mat-select (selectionChange)="onStatusChange($event)">
        <mat-option value="pending">Pending1
        </mat-option>
        <mat-option value="running">Running</mat-option>
    </mat-select>
</mat-form-field>

TS：

onStatusChange(event: any) {
  if (event.value == 'pending') {
    // Run function a
  }
  else if (event.value == 'running') {
    // Run function b
  }
}

Working_Demo

Answer 2

从 component.html 中，我们会将选定的值传递给更改事件中下拉菜单的 component.ts 。然后，我们将在 onStatusChange（）函数中获得该值。

component.html

<mat-form-field>
     <mat-select (change)="onStatusChange($event)">
         <mat-option value="pending"> Pending1 </mat-option>
         <mat-option value="running">Running</mat-option>
     </mat-select>
</mat-form-field>

component.ts

onStatusChange(event: any) {
  if (event.target.value == 'pending') {
    // Run function a
  }
  else if (event.value == 'running') {
    // Run function b
  }
}

应用Material UI标签后，下拉列表停止工作

2 个答案: