2

テンプレートにマットテーブルをレンダリングするコンポーネントがあります。一部の行を事前に選択したい。私が持っている 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);
      }
   }  
4

1 に答える 1