删除了Angular 6材质垫选择更改方法

129

在Angular Material Design 6中，删除了（更改）方法。当用户更改选择时，我找不到如何替换更改方法以在组件中执行代码。谢谢！

angular angular6

346

从更改change为selectionChange。

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

就是现在

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

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

— VtoCorleone
source

26

我好讨厌这个昨天，我认为升级到Angular 6是很酷的一天。他们再次更改了语法。

— Luis Lavieri '18

17

他们需要一个(changeEventChange)事件来检测更改事件何时更改。

— 堆栈下溢

3

（selectionChange）现在更新为（onSelectionChange）。

— Debadatta '19

@Debadatta-您在哪里看到的？我仍然看到selectionChange material.angular.io/components/select/api

— VtoCorleone

2

上面所有的评论仅进一步强调了为什么尽可能采取回应式表格方法是合理的。顺便说一句，我认为这些评论不是很公平，因为Angular Material的员工做得很棒，我们免费提供了它。

— 约瑟夫·辛普森，

24

如果您使用的是反应式表单，则可以像这样侦听对select控件的更改。

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

— 约瑟夫·辛普森
source

1

值得注意的是，使用上述反应式表单方法，您将不再受UI的约束，并且随着UI框架的发展也不太可能出现问题

— Joseph Simpson

我喜欢这个，我会尝试的。

— userx

此处仅需注意，如果您需要.updateValueAndValidity控件，请不要忘记通过{ emitEvent: false }以避免RangeError: Maximum call stack size exceeded。另一方面，感谢提示（+1），它使我找到了所需的东西。

— dcg

如果我采用这种方法，是否应该退订ngOnDestroy？

— ohidano

您始终需要清理您的订阅，以避免内存泄漏和意外行为。

— 约瑟夫·辛普森

7

对于：

1）垫选择(selectionChange)="myFunction()"按以下角度工作：

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>

sample.component.ts

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

2）简单的html select (change)="myFunction()"可以按以下方式工作：

sample.component.html

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

sample.component.ts

onChange() {
  //Do something
}

— 凯拉斯
source

3

对我来说(selectionChange)，建议(onSelectionChange)没有用，我没有使用ReactiveForms。我最终要做的是使用(valueChange)类似这样的事件：

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

这对我有用

— 银哈希
source

我使用的是模板表格，并通过以下方式为我工作：

<mat-select placeholder="Select an option" [(ngModel)]="project.managerId" name="managerId" required   (selectionChange)="fillComanager(project.managerId)">   <mat-option *ngFor="let manager of managers" [value]="manager.id"> 	{{ manager.name }}   </mat-option> </mat-select>

— pcdro

1

我今天在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”，

— 舌
source