テンプレートにマットテーブルをレンダリングするコンポーネントがあります。一部の行を事前に選択したい。私が持っている SelectionModel には、選択された各項目 (単純な文字列や数値ではない) を表すオブジェクトが含まれており、これらを比較する方法は、ネイティブの SelectionModel の方法よりも複雑です。
これがマット選択フォーム コントロールである場合、[compareWith] ディレクティブを使用してカスタム比較関数を提供できます。
<mat-select [compareWith]="myCompareFunction" >...
しかし、これは適切な解決策ではありません-表形式のプレゼンテーションが必要なためです。私は、Angular ドキュメントの例に厳密に従います。ここのマットテーブルの例:各行に選択チェックボックスを備えたマットテーブルがあり、これが私が従ったアプローチです。
例の Component コードでは、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);
}
}