Menambahkan filter di bawah setiap kolom untuk mat-table

Question

Saya menemukan Stackblitz dari Jawaban StackOverflow lain dan ingin melihat apakah saya dapat menambahkan filter ke tabel induk untuk setiap kolom.

Inilah Stackblitz saya yang saya coba dan ini yang paling dekat yang bisa saya dapatkan (harap abaikan CSS / styling). Saya memasang filter masukan di bawah kolom. (Perhatikan bahwa saya belum mengimplementasikan filter kerja itu sendiri di file .ts) Saya memperhatikan sesuatu yang menarik, bahwa tombol untuk mengurutkan kolom itu sendiri tidak hanya dibungkus dengan nama header / kolom, tetapi filter itu sendiri --Jadi, saat pengguna mengeklik filter untuk fokus pada bidang, mereka juga akan memicu penyortiran.

Saya mencoba menambahkan seluruh mat-form-fieldblok di bawah thtag / header dan itu bahkan tidak berfungsi atau muncul. Saya bingung di sini dan sepertinya tidak dapat menemukan cara untuk menempatkan filter di bawah tanpa membungkusnya dengan tombol sortir.

Answer 1

Jika Anda ingin mencegah tombol sortir diklik saat mengklik kolom input, Anda dapat mencoba menambahkan (click)="$event.stopPropagation();"ke kolom input. Mungkin juga Anda perlu menambahkannya ke acara (mouseup)atau, (mousedown)bukan ke (click)acara tersebut.