ant desigh of angular：让nz-tree-select与nz-tree的值保持一致

已于 2022-02-14 17:48:33 修改
阅读量1.2k 收藏
点赞数
分类专栏： ng-zorro error 文章标签： 前端 angular2
于 2022-01-04 10:44:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45158253/article/details/122297786
版权
本文介绍如何在Angular应用中，使用nz-tree-select组件和nz-tree组件时，确保两者选中值的一致性。通过共享同一树数据源，并利用Angular的特性进行渲染更新，实现两个组件的同步。
摘要由CSDN通过智能技术生成

需求:

如图：

说明：1、nz-tree-select与nz-tree用的是同一个树数据。2、zorro的10版本
在这里插入图片描述

在这里插入图片描述

html代码

<nz-tree-select
 style="width: 100%"
  [(ngModel)]="selectNodesValue"
  [nzNodes]="nodes"
  (ngModelChange)="onChange($event)"
  nzShowSearch
  nzPlaceHolder="选择测站"
  [nzAllowClear]=false
  nzVirtualHeight="300px"
>
</nz-tree-select>


 <nz-tree
  nzBlockNode
 [nzData]="nodes"
 [nzExpandedKeys]="defaultExpandedKeys"
 [nzSelectedKeys]="defaultSelectedKeys"
 (nzClick)="nzCheck($event)"
 >
<</
最低0.47元/天 解锁文章
蒲公英
关注
专栏目录
Use Golang Desigh A DAG Task Scheduler
程序员光剑
07-12 1891
> How to create a detailed source code and explanation for a `DAG task scheduler` in Golang.
angularjs下拉树控件
06-06
实现树的下拉效果，和ExtJs的treecombox大同小异。
ng-zorro的树选择nz-tree-select设置虚拟滚动的总高度和搜索隐藏未匹配的节点后显示有问题
zhaolifang_28的博客
02-15 866
在使用树选择nz-tree-select组件时设置了可以搜索的功能，并且添加了nzHideUnMatched="true"参数，在添加参数nzDropdownStyle="300px"后发现搜索后的数据显示有问题，搜索的数据没有直接显示在下面，如图所示查找发现是nzDropdownStyle="300px"设置固定高度会导致搜索出的数据在原先位置，需要滑动才能查看到，解决方法修改成[nzDropdownStyle]="{ 'max-height': '300px' }"，修改后代码如下。
树多选搜索查询，搜索后选中状态仍保留
yf18040578780的博客
08-30 1783
树多选搜索查询，搜索后选中状态仍保留
Ng-zorro组件库的TreeSelect树选择展示组件
最新发布
m0_63586335的博客
01-26 422
图上的效果使用了Ng-zorro的nz-tree-select组件。
ngx-tree-select:带有树项的角度选择组件
05-02
Ngx树选择 特征： 带有“扁平”项目的下拉菜单（与普通选择类似） 带有分层项的下拉菜单 简单或多个所选项目 使用分层数据，您可以强制选择子项或允许选择父项 符合ngModel和标准验证 可以限制显示的所选项目（...链接允许您的用户查看整个选择） 安装 这是安装组件的方法： npm install ngx-tree-select 或者 yarn add ngx-tree-select 在您的应用程序模块上： import { NgxTreeSelectModule } from 'ngx-tree-select' ; @ NgModule ( { declarations : [ ... ] , imports : [ BrowserModule , ... . , NgxTreeSelectModule . forRoot ( {
有关AntDesign的简单学习
gercke的博客
11-03 3369
1.AntDesign简介 AntDesign ，简称 antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。 AntDesign的特点： ???? 提炼自企业级中后台产品的交互语言和视觉风格。 ???? 开箱即用的高质量 React 组件。 ???? 使用 TypeScript 开发，提供完整的类型定义文件。 ⚙️ 全链路开发和设计工具体系。 ???? 数十个国际化语言支持。 ???? 深入每个细节的主题定制能力。 全链路开发和设计指的是什么？ 全链
目标导向的交互设计：About face 3 -- The essentials of interaction design 读书分享
Yu的专栏
02-19 1744
近段读完并分享了Allan copper的 About face3 : The essentials of interaction design，推荐没看过的程序员朋友可以抽时间看看。感觉上这本书对交互设计讲得比较透彻，首先拿出了方法--目标导向的交互设计，再介绍了交互设计的过程框架，最后介绍交互设计的细节。比较易读，不仅有大量的细节规则，还会让读者对交互设计的方法和框架有一些认识。
Design-Expert.8.05b完全破解
01-07
Design-Expert.8.05b完全破解
angular-material-tree-select-app
03-25
AngularMaterialTreeSelectApp 该项目是使用版本11.2.5生成的。 开发服务器 为开发服务器运行ng serve 。 导航到http://localhost:4200/ 。 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。 您还可以使用ng generate directive|pipe|service|class|guard|interface|enum|module 。 建造 运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。 运行单元测试 运行ng test以通过执行单元测试。 运行端到端测试 运行ng e2e通过执行端到端测试。 进一步的帮助 要获得有关Angular CLI的更多帮助，请使用
jsTreeSelect jquery 树形下拉菜单
07-22
用jsTree+div模拟 js树形下拉菜单
Angular2中select用法之设置默认值与事件详解
01-19
本文主要给大家介绍了Angular2中select用法之设置默认值与事件的相关内容，分享出来供大家参考学习，下面来看看详细的介绍： 一、设置默认值： 现在有三个学生小明，小红，小黑，对双向绑定的student设置你想要的select值就可以在下拉框默认选中 code1： 设置”请选择”为默认项，只需要把变量student设置为‘’，即可默认到“请选择”，需要注意的是 <option xss=removed>请选择</option>使用的是value（这是HTML原生的属性） <option ngFor=let value]='item'>
【项目问题】NZ-ZORRO的treeSelect组件查询时输入文字出现重叠
Dai的博客
06-12 343
【项目问题】NZ-ZORRO的treeSelect组件查询时输入文字出现重叠
.net bootstrap 下拉树状选择框_基于element封装tree树状下拉框
weixin_39917211的博客
11-25 522
在日常项目开发中，树状下拉框的需求还是比较常见的，但是element并没有这种组件以供使用。在这里，小编就基于element如何封装一个树状下拉框做个详细的介绍。通过这篇文章，你可以了解学习到一个树状下拉框组件是如何一步一步封装成功的。话不多说，先看效果图：封装组件该组件主要基于element的select组件、tree组件及input组件进行二次封装的。组件布局首先我们需要基于这几个组...
Nz-tree 树结构取消父子之间强关联关系后，选中父级，子级仍然选中，但取消子级后父级不会取消选中
申公的专栏
04-24 820
Nz-tree 树结构取消父子之间强关联关系后，选中父级，子级仍然选中，但取消子级后父级不会取消选中
nz-select选项无法默认显示
u011390452的博客
09-10 5308
在项目中使用nz-select选择框，前段代码如下。选中了几个选项，保存所选值 <nz-select nzMode="multiple" style="width: 100%" nzPlaceHolder="请选择文章标签" [(ngModel)]="tagIdList"> <nz-option *ngFor="let option of selectTags" [n...
【NG-ZERRO】select 可增加选项，nzDropdownRender对选项扩展
渐墨深的博客
05-31 2541
功能描述： 在下拉框中待选项可能并没有用户需要，这个时候希望实现用户能够自定义选项。 查看官方文档发现一个扩展菜单功能，代码如图所示： <nz-select style="width: 120px;" nzShowSearch nzAllowClear [ngModel]="'lucy'" [nzDropdownRender]="render"> <nz-...
antd-tree-select
神zhi殇的博客
12-25 2016
与select和tree的结合体。 文章目录基本使用超过N个...显示checkbox功能 基本使用 /** 0.支持双向绑定和ngModelChange。 1.nzExpandedKeys：展开的节点keys 2.nzShowSearch：是否显示模糊搜索，默认false 3.nzAllowClear：是否支持clear，默认true 4.nzMultiple：是否支持多选 */ <nz-tree-select style="width: 250px" [nzExpand
ng-zorro中Modal对话框细节操作
web
07-13 7042
很多时候，官网给的模板不适合我们的需求，这里是我对官网对话框的样式修改 官网样式： 1、修改宽度 具体代码： import { Component } from '@angular/core'; <button nz-button [nzType]="'primary'" (click)="showModal()"><span>Show Modal</span></button> // 只加nzWidth属性，其他不变 <
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值