在选择垫子上重新选择相同值时触发事件 [英] Trigger event on re-selecting same value on 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() openedChange，它将通过true(打开)或false(关闭).当我们关闭mat-select组件时，我们很感兴趣.不幸的是，opendChange无法直接访问我们选择的值.因此，我们只需制作一个绑定到我们选择的值的成员变量，每当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.

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