在 mat-select 上重新选择相同的值时触发事件

问题描述

我正在开发一个 mat-table，它实现了分页、过滤、选择等.我在其中一个标题列上有这个 mat-select用于为同一列上的所有其他 mat-select 设置全局值...像这样

I'm working on a mat-table which implements pagination, filtering, selection, etc. I have this mat-select on one of the header columns which I use to set a global value for all the other mat-select on the same column... Like this

到目前为止一切都很好，但是假设我选择了一个全局值，然后我增加了表的 pageSize，已经有选择的行将保持这种状态，但是新的附加行将具有默认值；现在，如果我再次转到全局 mat-select 并单击相同的选项将值应用于新行，则不会发生任何事情，因为我实际上没有更改选择;所以我试图基本上再次触发 mat-select 的 SelectionChange 事件，即使值实际上是相同的.

Everything works good so far, but lets say I choose a global value, and then I increase the pageSize of the table, the rows that already had the selection will stay that way, but the new additional rows will have the default value; now if I go to the global mat-select again and click on the same option to apply the value to the new rows, nothing will occur since I'm not actually changing the selection; so I'm trying to basically fire the SelectionChange event of the mat-select again even though the value is actually the same.

非常感谢任何帮助，我认为必须有一种非常简单的方法来完成这项工作，但我没有看到；如果需要任何其他信息，请告诉我！

Any help is greatly appreciated, I'm thinking there must be a really simple way to make this work but I'm not seeing it; if any additional info is needed let me know!

推荐答案

我知道这已经晚了，但我是来寻找解决方案的.

通常，我们会使用 @Output() selectionChange 将选定的值传递给 .ts 文件中的函数，然后在那里执行我们想要的操作.但是如果我们选择相同的值，这将不起作用.

Normally, we would be using @Output() selectionChange to pass the selected value to a function in our .ts file and do what we want there. But this doesn't work if we select the same value.

解决方案:

所以我们需要做的是使用 @Output() opensChange 它将传递 true (opened) 或 false (closed).我们感兴趣的是何时关闭 mat-select 组件.不幸的是，openChange 不能直接访问我们选择的值.所以我们简单地创建一个成员变量，绑定到我们选择的值，每当openChange被触发并返回false时，我们将使用该成员变量.

So what we need to do instead is use @Output() openedChange which will pass true (opened) or false (closed). We are interested in when we close the mat-select component. Unfortunately openedChange doesn't have direct access to the value we selected. So we simply make a member variable which is binded to the value we select, and whenever openedChange is triggered and returns false, we will use that member variable.

基本代码如下:

your-component.component.html

<mat-form-field>
  <mat-label>Options</mat-label>
  <mat-select *ngFor="let option of allOptions;"
              (openedChange)="onSelectionChange($event)"
              [(value)]="selectedVariable">
    <mat-option [value]="option">
      {{option.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

your-component.component.ts

  selectedVariable: any;

  constructor() {}

  ngOnInit() {
    //...
  }

  onSelectionChange(opened: boolean) {
    if (!opened && this.selectedVariable) {
      // Do whatever you want here with `this.selectedVariable`
      console.log(this.selectedVariable);
    }
  }

注意:在 onSelectionChange 函数中，您需要确保确实选择了某些内容.因为否则，如果用户点击选择，然后在没有选择任何内容的情况下点击离开，该功能将继续.

Note: In the onSelectionChange function, you need to make sure that something was actually selected. Because otherwise the function will continue if a user clicks on the select, and clicks away from it without selecting anything.

这篇关于在 mat-select 上重新选择相同的值时触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！