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

Question

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

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

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

Answer 1

我知道这已经晚了，但我已经找到了解决方案。

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

解决方案：

所以我们需要做的是使用@Output() openedChange将通过true（打开）或false（关闭）的。我们感兴趣的是何时关闭 mat-select 组件。不幸的是，openedChange 无法直接访问我们选择的值。因此，我们只需创建一个成员变量，将其绑定到我们选择的值，并且每当触发 opensChange 并返回 false 时，我们都会使用该成员变量。

这是基本代码：

你的组件.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>

你的组件.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 函数中，您需要确保确实选择了某些内容。因为否则，如果用户单击选择，然后单击离开而不选择任何内容，则该功能将继续。