可以在CompareWith中设置角SelectionModel对象的TypeScript函数吗？

Question

我有一个组件在它的模板中呈现席表。我想预选一些行。我所拥有的SelectionModel包含表示每个选定项的对象(不是简单的字符串或数字)，用于比较这些项的方法比本机选择模型的方法更复杂。

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

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

但这不是合适的解决方案--因为我需要一个表格式的演示。我紧跟在角度文件中的例子。mat表示例这里：在每行上都有一个带有选择复选框的mat表，这就是我所遵循的方法。

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

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

我正在寻找一种向SelectionModel对象提供自定义比较函数的方法。可以用函数的重写将SelectionModel划分为子类，还是可以以某种方式“注入”方法？

我尝试过子类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

从角度14开始，SelectionModel现在支持自定义compareWith函数。https://material.angular.io/cdk/collections/api#SelectionModel https://vscode.dev/github/angular/components/blob/a310fefb907cf88f38f46e0614289a4b057e8af0/src/cdk/collections/selection-model.ts#L43

interface IFoo {
 id: string;
 bar: string;
} 

selectionModel = new SelectionModel<IFoo>(
        true,
        [],
        true,
        (c1: IFoo , c2: IFoo ) => c1.id === c2.id
    );

Answer 2

因此，在检查了源之后，似乎不可能用子类SelectionModel来替换用于比较对象的方法。这是因为SelectionModel的大多数属性都在TypeScript中声明为私有属性。我想这一切都可以被忽略&因为它基本上是下面的JS，但是编译器在我尝试使用它们时会抱怨--我喜欢保持一个干净的编译。

我所做的是创建一个没有继承表单SelectionModel的新类。这个类实现了我所需的SelectionModel子集(在选择中切换项，并在发生更改时发出事件)--具有提供一个比较对象函数的功能，并使用这个函数而不是Collection/SelectionModel类。这个转换有点混乱，但是它阻止了编译器的呻吟！

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

现在起作用了，这就是我所需要的。谢谢你的指点。