Angular 6 Material mat-select 更改方法已删除

Posted 2023-02-19

【中文标题】Angular 6 Material mat-select 更改方法已删除

【英文标题】：Angular 6 Material mat-select change method removed

【发布时间】：2018-10-17 18:19:32

【问题描述】：

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

【参考方案1】：

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

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

【讨论】：

值得注意的是，使用上述反应式表单方法，您与 UI 的联系较少，并且随着 UI 框架的发展不太可能出现问题

这里要注意的是，如果你需要.updateValueAndValidity，控件不要忘记传递 emitEvent: false 以避免RangeError: Maximum call stack size exceeded。另一方面，感谢您的提示 (+1)，它引导我找到了我需要的东西。

如果我采用这种方法，是否应该在 ngOnDestroy 中取消订阅？

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

【参考方案2】：

将其从 change 更改为 selectionChange。

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

现在

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

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

【讨论】：

我非常讨厌这个。昨天我觉得升级到 Angular 6 很酷。他们又一次改变了语法。

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

(selectionChange) 现在更新为 (onSelectionChange)。

@Debadatta - 你在哪里看到的？我还是看到selectionChangematerial.angular.io/components/select/api

以上所有 cmets 只是进一步强调了为什么坚持使用反应式表单方法是有意义的，根据我在下面的回答，如果可能的话。顺便说一句，我认为 cmets 不是很公平，因为 Angular Material 的人做得很棒，而且我们免费获得。

【参考方案3】：

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

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

这对我有用

【讨论】：

我正在使用模板表单，并使用以下内容为我工作：<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>

【参考方案4】：

为：

1) mat-select (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()" 工作在 Angular 中：

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

【参考方案5】：

我今天遇到了 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>

垫版：

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

【参考方案6】：

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