angular / angular/components

Relax MatTableDataSource’s filter to be of type “{}”

Đang mở
#16,112 8 bình luận 6 reaction 0 người được giao Xem trên GitHub
area: material/table feature P3
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

#### Feature Description
Relax `MatTableDataSource.filter` to accept `{}`. Right now, it is restricted to `string`.
This would allow *much* easier custom filtering on multiple dimensions.

#### Use Case
When the filter is “only” a string, it makes it very difficult to “structurally” filter a table on multiple dimensions, even when customizing `filterPredicate` . Some recommendations on internet include:
- passing a JSon object, and parsing the JSon `filterPredicate`, for each and every row: http://nataliesmith.ca/blog/angular-material-filter-table
- everything in this bug thread: https://github.com/angular/components/issues/6178

While it works, it’s also a gratuitous workaround: It turns out that at no point does `MatTableDataSource` actually *require* filter to be a `string`: Whatever gets passed to `filter` just gets piped “as-is” to `filterPredicate`.

Here is a simple fork of “Table with filtering” that filters on different columns individually, where all I did was pass my complex object, while not respecting :
https://stackblitz.com/edit/table-filtering-multiple-filters-example?file=app/table-filtering-example.html
https://table-filtering-multiple-filters-example.stackblitz.io/

#### Caveats

It would still be up to the caller to make sure that their `filter` object is homogeneous with their `filterPredicate` object.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu từ điểm vào MatTableDataSource.filter và kiểm tra cách giá trị của nó được truyền tới filterPredicate. Cập nhật kiểu công khai để chấp nhận {}, đồng thời giữ nguyên luồng predicate hiện tại, sau đó xác minh rằng các đối tượng bộ lọc có cấu trúc đa chiều hoạt động mà không yêu cầu chuyển đổi JSON.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Tính năng
Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
45/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.