Skip to content

Commit

Permalink
docs(module:tree): add tips for the order of property settings (#5153)
Browse files Browse the repository at this point in the history
* docs(module:tree): add tips for the order of property settings

* docs(module:tree): add more tips and demo
  • Loading branch information
simplejason authored Apr 26, 2020
1 parent fb52f21 commit 4117967
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 0 deletions.
14 changes: 14 additions & 0 deletions components/tree/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ import { NzTreeModule } from 'ng-zorro-antd/tree';

### nz-tree

> Tips: According to the current data structure design, you need to ensure that `nzData` is set first, otherwise other attributes will not take effect. After the asynchronous operation returns data, re-assign other attributes to trigger rendering(including `nzExpandAll` `nzExpandedKeys` `nzCheckedKeys` `nzSelectedKeys` `nzSearchValue`). Please refer to [#5152](https://github.com/NG-ZORRO/ng-zorro-antd/issues/5152) to track the optimization progress.
| Property | Description | Type | Default | Global Config |
| -------- | ----------- | ---- | ------- | ------------- |
| `[nzData]` | Tree data (Reference NzTreeNode) | `NzTreeNodeOptions[] \| NzTreeNode[]` | `[]` |
Expand Down Expand Up @@ -133,6 +135,18 @@ import { NzTreeModule } from 'ng-zorro-antd/tree';
| remove | Clear current node(not root node) | function | - |

## Note
* Please make sure `nzData` is set before the above mentioned properties:
```typescript
// Demo
this.nzExpandAll = false;
const nodes = []; // source data
this.nzData = [...nodes];
// Reset the above mentioned properties if you have used after setting of nzData
this.nzExpandedKeys = [...this.nzExpandedKeys];
// this.nzExpandAll = true;
this.nzCheckedKeys = [...this.nzCheckedKeys];
this.nzSelectedKeys = [...this.nzSelectedKeys];
```
* `NzTreeNodeOptions` accepts your customized properties,use NzTreeNode.origin to get them.
* If Tree Methods used with ViewChild, should be used in ngAfterViewInit.
* Setting NzData with NzTreeNodeOptions[] is better,if you set nzData with NzTreeNode[], it will be deprecated in next major version(8.x).
14 changes: 14 additions & 0 deletions components/tree/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import { NzTreeModule } from 'ng-zorro-antd/tree';

### nz-tree

> 说明: 根据目前的数据结构设计,需要保证优先设置 `nzData`,否则各属性不会生效。异步操作待数据返回后,重新赋值其他各属性触发渲染(`nzExpandAll` `nzExpandedKeys` `nzCheckedKeys` `nzSelectedKeys` `nzSearchValue`)。重构优化工作请追踪 [#5152](https://github.com/NG-ZORRO/ng-zorro-antd/issues/5152)
| 参数 | 说明 | 类型 | 默认值 | 全局配置 |
| --- | --- | --- | --- | --- |
| `[nzData]` | 元数据 | `NzTreeNodeOptions[] \| NzTreeNode[]` | `[]` |
Expand Down Expand Up @@ -137,6 +139,18 @@ import { NzTreeModule } from 'ng-zorro-antd/tree';


## 注意
* 当前请确保 `nzData` 在其他数据相关的属性之前被初始化:
```typescript
// 示例
this.nzExpandAll = false;
const nodes = []; // 源数据
this.nzData = [...nodes];
// nzData 值异步获取变化后重新渲染一下属性
this.nzExpandedKeys = [...this.nzExpandedKeys];
// this.nzExpandAll = true;
this.nzCheckedKeys = [...this.nzCheckedKeys];
this.nzSelectedKeys = [...this.nzSelectedKeys];
```
* `NzTreeNodeOptions` 可以接受用户自定义属性,可通过 `NzTreeNode``origin` 属性取得。
* 使用 ViewChild 时,Tree 方法需要在 ngAfterViewInit 中调用。
* nzData 属性请传递 NzTreeNodeOptions 数组。

0 comments on commit 4117967

Please sign in to comment.