<
tbody
>
<
ng-container
*ngFor
=
"
let data of expandTable.data
"
>
<
ng-container
*ngFor
=
"
let item of mapOfExpandedData[data.key]
"
>
<
tr
*ngIf
=
"
item.parent && item.parent.expand || !item.parent
"
>
[nzIndentSize]
=
"
item.level * 20
"
[nzShowExpand]
=
"
!!item.childKey
"
[(nzExpand)]
=
"
item.expand
"
(nzExpandChange)
=
"
collapse(mapOfExpandedData[data.key],item,$event)
"
>
{item.id}}
在使用
NG
-
ZORRO
的树状
表格
时，官方提供的 demo是一次性加载全部
数据
的。在项目中，
数据
比较多的情况下，一次性获取全部
数据
，是非常影响用户体验的。所以
实现
树状
表格
惰性加载
数据
。
创建一个组件
$
ng
g c sluggishness-tree-table
Your global
Angular
CLI version (10.2.0) is greater than your local
version (7.3.9). The local
Angular
CLI version is used.
< script src =" jquery.treetable.js " > </ script > <!-- See http://plugins.jquery.com/treetable/ -->
< link rel =" stylesheet " type =" text/css " href =" jquery.treetable.css " />
< link rel =" stylesheet " type =" text/css " href =" jquery.treetable.theme.default.css " /> <!-- You'll probably want to modify this -->
< script src ="
angular
.min.js " > </ scrip
项目还使用了一些 node.js 工具进行初始化和测试。 您必须安装 node.js 及其包管理器 (npm)。 您可以从获取它们。
克隆角度列表树
使用 git 克隆
angular
-list-tree 存储库：
git clone cd
angular
-list-tree
### Install Dependencies
We have two kinds of dependencies in this project: tools and
angular
framework code. The tools help
us manage and test the application
近两年当中使用
Angular
开发过很多项目，其中也涉及到一些
树形
结构视图的显示，最近的在项目中封装了大量的组件，一些组件也有
树形
结构的
展示
，所以写出来总结一下。
相信大家都知道，树结构最典型的例子就是目录结构了吧，一个目录可以包含很多子目录，子目录又可以包含若干个子孙目录，那咱们今天就以目录结构为例来说明一下
Angular
中树结构的
实现
。
首先，我们希望封装一个组件，用于显示整个目录的
树形
机构，代码如下：
<!DOCTYPE html>
<html
ng
-app=treeDemo>
1.java 后台package com.dsunsoft.cqhzz.blogic.java.I0202;
import java.util.ArrayList;import java.util.HashMap;import java.util.List;import java.util.Map;
import org.slf4j.Logger;import org.slf4j.Log...
近两年当中使用
Angular
开发过很多项目，其中也涉及到一些
树形
结构的显示，最近的在项目中封装了大量的组件，其中一些组件也涉及到
树形
结构，所以写出来总结一下。
相信大家都知道，树结构最典型的例子就是目录结构了吧，一个目录可以包含很多子目录，子目录又可以包含若干个子孙目录，那咱们今天就以目录结构为例来说明一下
Angular
中树结构的
实现
。
首先，我们希望封装一个组件，用于显示整个目录的
树形
机构，代码如下：
angular
.module('treeDemo', [])
.controller("TreeCo
<tableclass="table ">
<tbodyrtSelectionArea [multiple]=" multiple"style="position: relative; ">
<
ng
-template
ng
Forlet-hu [
ng
ForOf]="list.items">
在
Angular
中，您可以使用
ng
-
zorro
-antd库中的`nz-date-picker`组件来创建一个带有日历和日期范围的日期选择器。以下是一个使用`nz-date-picker`的例子：
1. 首先，您需要在您的应用中安装和导入`
ng
-
zorro
-antd`库。
2. 在您的组件的HTML模板中添加一个`nz-date-picker`元素，并使用`nzMode`属性将其定义为日期选择器。
```html
<nz-date-picker nzMode="date"></nz-date-picker>
3. 在您的组件中，您需要定义一个`nz-date-picker`对象，并将其与`nz-date-picker`元素相关联。您还可以使用`nzDisabledDate`属性来定义可选择的日期范围。
```typescript
import { Component } from '@
angular
/core';
import { NzDatePickerModule } from '
ng
-
zorro
-antd/date-picker';
@Component({
selector: 'app-date-picker',
templateUrl: './date-picker.component.html',
styleUrls: ['./date-picker.component.css']
export class DatePickerComponent {
disabledDate = (current: Date): boolean => {
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2020, 11, 31);
return current < minDate || current > maxDate;
constructor() { }
在这个例子中，我们定义了一个`disabledDate`函数来禁用不在2020年1月1日和2020年12月31日之间的日期。
4. 最后，您需要在`nz-date-picker`中使用`nzFormat`属性来定义日期的格式。
```html
<nz-date-picker nzMode="date" nzFormat="yyyy-MM-dd" [nzDisabledDate]="disabledDate"></nz-date-picker>
在这个例子中，我们将日期格式定义为`yyyy-MM-dd`。
这就是如何在
Angular
中使用
ng
-
zorro
-antd库中的`nz-date-picker`组件创建一个带有日历和日期范围的日期选择器。
