Angular 角度6材料垫选择更改方法已删除

在角材料设计6中，取消了更改方法。 当用户更改选择时，我找不到如何替换change方法来执行组件中的代码

---

谢谢

如果您使用的是被动表单，您可以像这样监听select控件的更改

this.form.get('mySelectControl').valueChanges.subscribe(value => { ... do stuff ... })

用户将其从change更改为selectionChange

现在是

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

对我来说，selectionChange和建议的onSelectionChange不起作用，我没有使用ReactiveForms。我最终使用的是valueChange事件，如：

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

这对我来说很有用，因为：

1 mat select selectionChange=My功能以角度方式工作，如下所示：

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

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

2个简单的html select change=My函数在以下情况下工作：

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

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

---

我今天和mat option group有这个问题。 解决问题的方法是在其他提供的mat select事件中使用： 价值变化

我在这里写了一些代码，以便于理解：

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

Mat版本：

@角度/材料：^6.4.7

---

值得注意的是，使用上述反应式表单方法，您与UI的联系更少，并且随着UI框架的发展，出现问题的可能性也更小。请注意，如果需要。updateValueAndValidity控件不要忘记传递{emitEvent:false}，以避免RangeError:超过最大调用堆栈大小。另一方面，感谢提示+1，它引导我找到了我需要的。如果我遵循这种方法，我是否应该在Ngondestory中取消订阅？你总是需要清理订阅以避免内存泄漏和意外行为。我非常讨厌这样。昨天我觉得升级到Angular 6是个凉爽的一天。他们再次更改了语法。他们需要一个changeEventChange事件来检测更改事件的更改时间。selectionChange现在更新为onSelectionChange。@Debadatta-您在哪里看到这个？我仍然看到selectionChange上面的所有评论只是进一步强调了为什么在可能的情况下，按照我下面的回答，坚持采用反应式的方式是有意义的。顺便说一句，我认为这些评论不太公平，因为棱角材料的家伙们做了一项惊人的工作，我们免费得到它

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