UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载导读在使用 NG-ZORRO 的nz-select时经常会遇到一个看似矛盾的需求表单需要显示一个默认值但这个默认值并不存在于下拉选项列表中例如来自后端历史数据、临时占位值或编辑场景下已下线的选项。如果强行把它加进选项列表用户会看到一个多余甚至无法选择的选项不加默认值又无法渲染。本篇基于 components/select/demo/default-value.md 及其配套示例讲解如何借助nz-option的nzHide属性让默认值既能正确回显、又不会出现在下拉面板中并深入到源码层面说明其过滤原理。场景与需求本质官方演示文档给出了一句精炼的说明default-value.md当需要显示默认值同时默认值又不在选项列表中时可以使用nzHide在nz-option中将默认选项隐藏。即核心诉求是两个状态分离已选中态顶部显示区默认值必须能正常渲染成标签tag或选中文本下拉面板选项列表默认值对应的选项不应出现在列表中避免用户重复选择或误以为它是候选值。nzHide正是为这种值参与选中、但不参与候选的选项设计的。核心 APInz-option的nzHidenz-option的完整属性表见 components/select/doc/index.en-US.md其中与本文相关的属性定义如下属性说明类型默认值[nzLabel]在nz-select和下拉菜单中显示的文本string \| number-[nzValue]传给nz-select的ngModel的值any-[nzHide]是否在选项列表中隐藏该选项booleanfalse在源码 components/select/option.component.ts 中nzHide通过booleanAttribute转换器声明Input({ transform: booleanAttribute }) nzDisabled false; Input({ transform: booleanAttribute }) nzHide false; Input({ transform: booleanAttribute }) nzCustomContent false;这意味着模板中既可以写nzHide属性存在即为true也可以写[nzHide]someCondition进行动态绑定。完整示例两个典型场景配套示例源码位于 components/select/demo/default-value.ts覆盖了多选与单选两种模式是官方推荐的标准写法import { Component, signal } from angular/core; import { FormsModule } from angular/forms; import { NzSelectModule } from ng-zorro-antd/select; Component({ selector: nz-demo-select-default-value, imports: [FormsModule, NzSelectModule], template: nz-select nzModemultiple nzPlaceHolderInserted are removed [(ngModel)]listOfSelectedValue for (option of listOfOption; track option) { nz-option [nzLabel]option [nzValue]option / } for (option of defaultOption; track option) { nz-option [nzLabel]option [nzValue]option nzHide / } /nz-select br / br / nz-select [(ngModel)]value for (option of listOfOption; track option) { nz-option [nzLabel]option [nzValue]option / } nz-option nzLabelDefault Value nzValueDefault nzHide / /nz-select , styles: nz-select { width: 100%; } }) export class NzDemoSelectDefaultValueComponent { readonly listOfOption [Option 01, Option 02]; readonly listOfSelectedValue signal([Default 01, Default 02]); readonly value signal(Default); get defaultOption(): string[] { return this.listOfSelectedValue(); } }场景一多选nzModemultiple常规候选Option 01、Option 02通过for渲染为普通nz-optionngModel初始值为[Default 01, Default 02]这两个值不在候选列表中通过第二个for再渲染一组nz-option标签和值与默认值完全一致但加上nzHide属性使其只负责占位供选中回显不进入下拉面板。此时界面上会呈现两个默认标签而打开下拉面板时Default 01、Default 02不会出现。场景二单选默认模式单选场景更加直观在常规选项之后追加一个nz-option nzLabelDefault Value nzValueDefault nzHide /。ngModel初始值为字符串Default组件会在所有选项含隐藏项中匹配到该值并显示其nzLabel但用户打开下拉列表时看不到这条默认值选项。注意事项placeholder 的语义示例中多选设置了占位符nzPlaceHolderInserted are removed插入的会被移除它传达了一个行为提示隐藏选项不参与候选匹配通过输入/搜索插入的、与隐藏项无关的文本不会进入选中集合。占位符只在ngModel为空时显示一旦隐藏默认值被选中占位符即消失。源码原理隐藏选项如何被过滤从源码结构看nzHide的过滤逻辑分为两条路径最终都汇聚在 components/select/select.component.ts 的updateListOfContainerItem()方法中。1. 模板驱动nz-option路径ngAfterContentInit()中select.component.ts组件会收集所有nz-option实例把nzLabel、nzValue、nzHide等属性逐一映射为内部选项项存为listOfTagAndTemplateItem。随后在构建下拉面板容器列表时let listOfContainerItem this.listOfTagAndTemplateItem .filter(item !item.nzHide) .filter(item { if (!this.nzServerSearch this.searchValue) { return this.nzFilterOption(this.searchValue, item); } else { return true; } });见 select.component.ts可见隐藏项在第一步就被剔除之后才会执行搜索过滤、激活项计算与分组标签插入。这意味着nzHide选项绝不会出现在下拉面板中也不会被键盘上下键选中。2. 已选中标签的渲染关键点在于隐藏选项虽然被从容器列表下拉面板过滤掉但仍保留在listOfTagAndTemplateItem全量集合中。ngOnInit()中通过combineLatest([listOfValue$, listOfTemplateItem$])订阅select.component.ts把ngModel的当前值逐一在全量集合中按compareWith匹配生成listOfTopItem用于顶部显示区渲染。因此隐藏选项既能以标签/文本形式正常回显又不会进入下拉候选两个状态互不干扰。3. 响应式数据驱动[nzOptions]路径若你更习惯用[nzOptions]传入选项数组而非模板标签隐藏能力同样存在。NzSelectOptionInterface中定义了hide?: boolean字段components/select/select.types.ts在ngOnChanges()转换时被映射为内部nzHideconst listOfTransformedItem listOfOptions.map(item { return { ... nzHide: item.hide || false, ... }; });见 select.component.ts因此两种数据提供方式都能利用隐藏特性listOfOptions signal([ { label: Option 01, value: Option 01 }, { label: Option 02, value: Option 02 }, { label: Default 01, value: Default 01, hide: true } ]);测试用例中的佐证在 components/select/select.spec.ts 的测试组件中nz-option的[nzHide]o.nzHide被作为标准属性参与组件渲染与交互验证数据驱动模式下同样通过NzSelectItemInterface携带nzHide字段。这从测试层面印证了隐藏选项作为一等公民参与选中、但不参与候选的行为契约。延伸动态隐藏与清除默认值nzHide支持动态绑定booleanAttribute转换因此可以按状态实时决定是否隐藏。仓库中另一个相关示例 components/select/demo/hide-selected.ts 展示了反向用法——把已选中的选项动态隐藏nz-option [nzLabel]option [nzValue]option [nzHide]isSelected(option) /其原理与默认值场景完全一致已选中的选项从下拉面板中消失避免用户重复选择取消选中后又恢复显示。这也是nzHide最具实用价值的设计——它把选中状态与候选可见性解耦开发者可以自由组合出默认值回显、禁止重复选择、根据条件屏蔽某些选项等交互。此外需要留意的是隐藏选项虽然不可在下拉面板中点击选择但允许通过ngModel初始值注入选中态一旦用户在多选模式下点击标签的删除按钮删除该默认值onItemDelete()会将其从listOfValue中移除select.component.ts之后由于它不在候选列表中用户便无法再手动选回——除非重新设置默认值或调整nzHide条件这一点在业务设计中应提前考虑。小结nzHide是 NG-ZORRO Select 在处理默认值不在选项列表这一常见表单场景时的官方解法只需在nz-option上加一个布尔属性即可实现回显不失效隐藏选项仍参与ngModel值匹配正常渲染标签与选中文本候选不污染隐藏选项在updateListOfContainerItem()中被先行过滤不出现在下拉面板与键盘导航中两种写法通用模板nz-option nzHide与数据驱动nzOptions中的hide: true均可使用动态可控booleanAttribute转换使其支持按业务条件实时开合隐藏。在实际项目中该方案尤其适用于编辑页回显历史数据、展示已失效/已下线的历史选项、以及禁止重复选择类交互是 Select 组件高价值、低成本的一个隐藏能力。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐告别属性不存在错误TypeScript可选属性与默认值的优雅实践告别属性不存在错误TypeScript可选属性与默认值的优雅实践 你是否还在为TypeScript对象属性的可能未定义错误烦恼是否经常在访问对象属性编程语言编译器开发工具PPT Master 快速上手三步把任意文档变成原生可编辑的 PowerPointPPT Master 快速上手三步把任意文档变成原生可编辑的 PowerPoint 一份 PDF 进去一个原生可编辑的 .pptx 出来开源工具 PPTAI 技能人工智能AI 应用Refine 中 useSelect 的 defaultValue 全面解析让默认选项稳定出现在下拉列表中的完整方案Refine 中 useSelect 的 defaultValue 全面解析让默认选项稳定出现在下拉列表中的完整方案 defaultValue 是 Refin前端企业应用上一篇FacetimeHD 项目常见问题解决方案下一篇CANN/asc-devkit贝塞尔函数j0f创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考