181

在 Angular Material Design 6 中，删除了（更改）方法。当用户更改选择时，我应该如何替换更改方法以执行组件中的代码？

4

6 回答 6

476

将其从 更改change为selectionChange。 

<mat-select (change)="doSomething($event)">

就是现在

<mat-select (selectionChange)="doSomething($event)">

https://material.angular.io/components/select/api

于 2018-05-07T23:55:16.863 回答
29

如果您使用的是反应式表单，您可以像这样监听选择控件的更改..

this.form.get('mySelectControl').valueChanges.subscribe(value => { ... do stuff ... })
于 2018-05-07T22:40:11.447 回答
13

为了：

1) mat-select(selectionChange)="myFunction()"在角度上工作：

示例.component.html

 <mat-select placeholder="Select your option" [(ngModel)]="option" name="action" 
      (selectionChange)="onChange()">
     <mat-option *ngFor="let option of actions" [value]="option">
       {{option}}
     </mat-option>
 </mat-select>

样本.component.ts

actions=['A','B','C'];
onChange() {
  //Do something
}

2) 简单的 html 选择(change)="myFunction()"在 Angular 中工作为：

示例.component.html

<select (change)="onChange()" [(ngModel)]="regObj.status">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

样本.component.ts

onChange() {
  //Do something
}
于 2019-08-26T13:58:39.323 回答
7

对我来说(selectionChange)，建议(onSelectionChange)不起作用，我没有使用ReactiveForms. 我最终做的是使用如下(valueChange)事件：

<mat-select (valueChange)="someFunction()">

这对我有用

于 2019-04-22T13:36:37.627 回答
2

我今天遇到了 mat-option-group 的这个问题。解决我问题的方法是在其他提供的 mat-select 事件中使用： valueChange

我在这里放了一些代码以供理解：

<mat-form-field >
  <mat-label>Filter By</mat-label>
  <mat-select  panelClass="" #choosedValue (valueChange)="doSomething1(choosedValue.value)"> <!-- (valueChange)="doSomething1(choosedValue.value)" instead of (change) or other event-->

    <mat-option >-- None --</mat-option>
      <mat-optgroup  *ngFor="let group of filterData" [label]="group.viewValue"
                    style = "background-color: #0c5460">
        <mat-option *ngFor="let option of group.options" [value]="option.value">
          {{option.viewValue}}
        </mat-option>
      </mat-optgroup>
  </mat-select>
</mat-form-field>

垫子版本：

"@angular/material": "^6.4.7",

于 2020-01-23T16:03:37.417 回答
0

对我来说...(click)="myFunction()"...工作；从上面什么都没有。

于 2021-07-15T01:34:29.253 回答