マットテーブルの各列の下にフィルターを追加する

Dec 16 2020

別のStackOverflowAnswerからStackblitzに出くわし、各列の親テーブルにフィルターを追加できるかどうかを確認したいと思いました。

これが私が試したStackblitzで、これが私が得ることができる最も近いものでした(CSS /スタイリングは無視してください)。列の下に入力フィルターを叩きました。(.tsファイルに実際の作業フィルター自体を実装していないことに注意してください)しかし、列自体を並べ替えるボタンがヘッダー/列名だけでなくフィルター自体でラップされるという興味深いことに気づいています。 -したがって、ユーザーがフィルターをクリックしてフィールドにフォーカスすると、並べ替えもトリガーされます。

/ headerタグのmat-form-field下にブロック全体を追加しようとしましたが、th機能しないか、表示されません。私はここで途方に暮れていて、ソートボタンでラップせずにフィルターを下に配置する方法を理解できないようです。

回答

1 blazebot7000 Dec 16 2020 at 01:40

入力フィールドをクリックしたときに並べ替えボタンがクリックされないようにする場合は、入力フィールドに追加(click)="$event.stopPropagation();"してみてください。イベントの代わりに(mouseup)または(mousedown)イベントにそれを追加する必要がある場合もあります(click)