在mat-select

Question

我正在研究实现分页，过滤，选择等的mat-table。我在其中一个标题列中使用了此mat-select，该列用于设置其他所有列的全局值mat-select在同一列上...这样

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

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

Answer 1

这有点“变通”，但是我想知道是否可以利用：

  

@Output（）   opensChange：EventEmitter

     

切换选择面板时发出的事件。

每当更改或关闭选择时都触发函数，因为我认为这基本上就是您要完成的工作。

但是，您可能必须添加一些逻辑以防止函数被两次触发。

Answer 2

我知道这很晚了，但是我来找到解决方法了。

通常，我们将使用@Output() selectionChange将选定的值传递到.ts文件中的函数，然后在该文件中执行所需的操作。但是，如果我们选择相同的值，这将不起作用。

解决方案：

因此，我们需要做的是使用@Output() openedChange，它将通过true（打开）或false（关闭）。我们对关闭垫选择组件感兴趣。不幸的是，opendChange无法直接访问我们选择的值。因此，我们只需制作一个绑定到我们选择的值的成员变量，每当openChange触发并返回false时，我们就将使用该成员变量。

这是基本代码：

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