angular / angular/components

help(Tree): TreeControl selection model doesn't work for immutable data

Đang mở
#21,422 4 bình luận 2 reaction 0 người được giao Xem trên GitHub
area: cdk/collections 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ả

Please see this - https://stackoverflow.com/q/65412659/2896495.

I needed a dynamically loading nodes in the angular material tree, so I created my own `GeoDataSource` which internally uses **_@ngrx/component-store_** to handle all the interaction between data source, TreeControl and the tree itself.

Now, the problem is the tree doesn't keep its expansion state because the `abstract class BaseTreeControl` uses `SelectionModel` class and this in turn uses `Set` to keep track of items that are selected. So if node is expanded it just does this:
```
this._selection.add(value); // Set.add(value)
```

When using immutable data (from the component store) those items are always new.

I tried to use `trackBy` optional function:
```
this.treeControl = new FlatTreeControl(
(node) => node.nodeLevel,
(node) => node.expandable, {
trackBy: (node) => node.groupPath // *** groupPath is string (it's an ID) ***
}
);
```

and for this I had to change `FlatTreeControl` to `FlatTreeControl`, otherwise it doesn't compile. But then I got the following error in the **_template_**:

> Type 'FlatTreeControl' is not assignable to type 'TreeControl'

Here's the template:
```

```

Now what? How do I make all this work with immutable data from the store?

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

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

Hướng nghiên cứu

Bắt đầu bằng cách đọc BaseTreeControl và SelectionModel, sau đó so sánh generic trackBy của FlatTreeControl với kiểu TreeControl mà template mat-tree yêu cầu. Tái hiện trường hợp dữ liệu bất biến trong issue và xác minh rằng trạng thái mở rộng vẫn được duy trì qua việc thay thế các node, trong khi các kiểu của template vẫn tương thích.

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
Lỗi
Độ khó
5/5
Thời gian dự kiến
Hơn một tuần
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
25/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.