是否可以在 TypeScript 中设置 Angular SelectionModel 对象的 CompareWith 函数

Question

我有一个在其模板中呈现 mat-table 的组件。我想预先 select 一些行。我拥有的 SelectionModel 包含表示每个 selected 项目的对象（不是简单的字符串或数字），比较这些的方法比本机 SelectionModel 的方法更复杂。

如果这是一个 mat-select 表单控件，我可以使用 [compareWith] 指令提供自定义比较函数，例如

<mat-select [compareWith]="myCompareFunction"  >...

但这不是 suitable 解决方案 - 因为我需要表格表示。我密切关注 Angular 文档中的示例。 mat-table 示例 here: 有一个 mat-table，每行都有 selection 复选框，这是我遵循的方法。

在示例的组件代码中，它使用了 SelectionModel 对象。

import {SelectionModel} from '@angular/cdk/collections';
....
....
selection = new SelectionModel<PeriodicElement>(true, []);

我正在寻找一种方法来为 SelectionModel 对象提供自定义比较函数。 SelectionModel 是否可以通过函数的重写进行子class编辑，或者方法是否可以 'injected' 以某种方式进行？

我已经尝试子 class SelectionModel 并声明一个新的 compareWith 函数，但这似乎不是所需要的。谁能给点建议？

   import { SelectionModel } from '@angular/cdk/collections';
   import { InputOptionIf } from '../formosa-interfaces/dynamic-field-config-if';

   export class ModalSelectSelectionModel extends SelectionModel<InputOptionIf>{
      compareWith(o1:any,o2:any) {
        console.log("ModalSelectSelectionModel.compareWith()")
        return( <InputOptionIf>o1.label==<InputOptionIf>o2.label);
      }
   }

Answer 1

因此，在检查了源代码后，似乎无法通过子class SelectionModel 来替换用于比较对象的方法。这是因为 SelectionModel 的大部分属性在 TypeScript 中都被声明为私有的。我想这一切都可以被忽略和覆盖，因为它基本上是 JS，但是当我尝试使用它们时编译器会抱怨 - 我喜欢保持干净的编译。

我所做的是创建一个新的 class，没有任何继承形式的 SelectionModel。这个 class 实现了 我所需的 SelectionModel 子集（切换选择中的项目，并在发生变化时发出事件）——具有我需要提供比较对象的功能的能力，并使用这个代替 Collections/SelectionModel class。演员阵容有点乱，但它可以防止编译器呻吟！

this.selectionModel= <SelectionModel<InputOptionIf>><unknown>new MySelectionMode(...)

它现在可以工作了，这就是我所需要的。谢谢指点

是否可以在 TypeScript 中设置 Angular SelectionModel 对象的 CompareWith 函数

Is it possible to set the CompareWith function of Angular SelectionModel object in TypeScript

selectionmodel

angular-material

angular

mat-table