小编gre*_*cks的帖子

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

我有一个在其模板中呈现 mat-table 的组件。我想预先选择一些行。我的 SelectionModel 包含代表每个选定项目的对象(不是简单的字符串或数字),并且比较这些对象的方法比本机 SelectionModel 的方法更复杂。

如果这是一个垫选择表单控件,我可以使用 [compareWith] 指令来提供自定义比较函数,例如

<mat-select [compareWith]="myCompareFunction"  >...
Run Code Online (Sandbox Code Playgroud)

但这不是合适的解决方案 - 因为我需要表格演示。我密切关注 Angular 文档中的示例。这里的mat-table 示例每行都有一个带有选择复选框的 mat-table,这是我遵循的方法。

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

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

我正在寻找一种为 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);
      }
   }  
Run Code Online (Sandbox Code Playgroud)

selectionmodel angular-material angular mat-table

5
推荐指数
1
解决办法
2700
查看次数