尧图网页设计 
UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本指南聚焦 ng-zorro-antdnz-table的展开行功能讲解如何通过td上的nzExpand属性启用行展开并用nzExpandIcon完全替换默认的展开/收起箭头图标。读完本文你将掌握自定义展开图标的模板写法、状态同步要点以及该 API 在组件源码中的真实渲染逻辑可直接照抄到自己的业务表格中。一、背景表格的可展开行机制当表格内容较多、无法一次性完整展示时ng-zorro-antd 提供了“可展开行”能力在tbody内的每一组tr后紧跟一行展开内容区并通过td上的nzExpand属性控制该行是否展开。官方示例见 components/table/demo/expand.md 与 components/table/demo/expand.ts其核心写法是nz-table #nzTable [nzData]listOfData nzTableLayoutfixed tbody for (data of nzTable.data; track data.id) { tr td [nzExpand]expandSet.has(data.id) (nzExpandChange)onExpandChange(data.id, $event)/td !-- 其他单元格 -- /tr tr [nzExpand]expandSet.has(data.id) span{{ data.description }}/span /tr } /tbody /nz-table要点是[nzExpand]绑定当前行的展开状态布尔值(nzExpandChange)在展开状态变化时回传新的布尔值用于把状态写回组件紧随其后的tr [nzExpand]...是展开内容区状态与首行同步。二、默认展开按钮长什么样在不做任何定制时ng-zorro-antd 会渲染一个内置的展开按钮其样式由 components/table/src/addon/row-expand-button.directive.ts 控制Directive({ selector: button[nz-row-expand-button], host: { class: ant-table-row-expand-icon, [class.ant-table-row-expand-icon-expanded]: !spaceMode expand true, [class.ant-table-row-expand-icon-collapsed]: !spaceMode expand false, (click): onHostClick() } }) export class NzRowExpandButtonDirective { Input() expand false; Input() spaceMode false; Output() readonly expandChange new EventEmitter(); // 点击时取反 expand并对外发射 expandChange }可见默认按钮本质是一个带ant-table-row-expand-icon类名的button展开/收起分别对应ant-table-row-expand-icon-expanded与ant-table-row-expand-icon-collapsed两个状态类。spaceMode用于在“无展开功能但需占位缩进”的场景下渲染占位空隙。三、用 nzExpandIcon 替换默认图标默认箭头图标无法满足所有产品需求例如需要加号/减号、自定义业务语义图标。此时只需在td上同时传入nzExpandIconng-zorro-antd 就会完全用你的模板替换默认按钮。官方示例见 components/table/demo/expand-icon.md 与其配套实现 components/table/demo/expand-icon.ts。完整可运行的组件代码如下import { Component } from angular/core; import { NzIconModule } from ng-zorro-antd/icon; import { NzTableModule } from ng-zorro-antd/table; Component({ selector: nz-demo-table-expand-icon, imports: [NzIconModule, NzTableModule], template: nz-table #nzTable [nzData]listOfData nzTableLayoutfixed thead tr th nzWidth60px/th thName/th thAge/th thAddress/th /tr /thead tbody for (data of nzTable.data; track data.id) { tr td [nzExpand]expandSet.has(data.id) [nzExpandIcon]expandIcon/td td{{ data.name }}/td td{{ data.age }}/td td{{ data.address }}/td /tr tr [nzExpand]expandSet.has(data.id) span{{ data.description }}/span /tr ng-template #expandIcon if (!expandSet.has(data.id)) { nz-icon nzTypeplus-circle nzThemeoutline (click)onExpandChange(data.id, true) / } else { nz-icon nzTypeminus-circle nzThemeoutline (click)onExpandChange(data.id, false) / } /ng-template } /tbody /nz-table }) export class NzDemoTableExpandIconComponent { expandSet new Setnumber(); onExpandChange(id: number, checked: boolean): void { if (checked) { this.expandSet.add(id); } else { this.expandSet.delete(id); } } listOfData [ { id: 1, name: John Brown, age: 32, address: New York No. 1 Lake Park, description: My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park. }, { id: 2, name: Jim Green, age: 42, address: London No. 1 Lake Park, description: My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park. }, { id: 3, name: Joe Black, age: 32, address: Sidney No. 1 Lake Park, description: My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park. } ]; }3.1 写法拆解声明模板引用变量在for循环内通过ng-template #expandIcon定义展开图标模板#expandIcon就是传给nzExpandIcon的TemplateRef。绑定到单元格td [nzExpand]expandSet.has(data.id) [nzExpandIcon]expandIcon两个属性缺一不可——nzExpand负责展开逻辑nzExpandIcon负责渲染自定义图标。状态自管理示例用expandSet: Setnumber记录已展开行的 id模板内根据expandSet.has(data.id)决定显示加号还是减号。点击即切换图标上的(click)调用onExpandChange(data.id, true/false)内部对Set做 add/delete驱动[nzExpand]重新求值展开内容区随之显隐。3.2 为什么这样写就能生效从源码看td的附加行为由 components/table/src/cell/td-addon.component.ts 中的NzTdAddOnComponent实现其模板逻辑是if (nzShowExpand || nzIndentSize 0) { nz-row-indent [indentSize]nzIndentSize / if (nzExpandIcon) { ng-template [ngTemplateOutlet]nzExpandIcon / } else { button nz-row-expand-button [expand]nzExpand (expandChange)onExpandChange($event) [spaceMode]!nzShowExpand/button } }对应的输入属性定义为Input({ transform: booleanAttribute }) nzExpand false; Input() nzExpandIcon: TemplateRefvoid | null null; Output() readonly nzExpandChange new EventEmitterboolean();由此可以确认以下几点实现事实nzExpandIcon的类型是TemplateRefvoid默认值为null只要传入非空模板if (nzExpandIcon)分支就会命中默认的nz-row-expand-button按钮不再渲染实现“完全替换”。模板通过ngTemplateOutlet渲染因此自定义图标里可以使用循环变量data、组件方法等一切当前作用域内的能力。自定义模板内的点击事件需要自行处理并维护展开状态示例中写回expandSet而默认按钮则由指令内部onHostClick()自动取反并 emitexpandChange。这是两种模式最重要的差异点。四、API 与取值说明在 components/table/doc/index.zh-CN.md 的 API 表中与本功能相关的接口定义如下参数说明类型默认值[nzExpand]当前行是否展开boolean-[nzExpandIcon]自定义展开图标TemplateRefvoid-(nzExpandChange)展开状态变化回调EventEmitterboolean-实用注意事项nzExpandIcon只有在nzExpand或其触发的nzShowExpand生效的单元格上才有意义从源码可见图标渲染分支位于if (nzShowExpand || nzIndentSize 0)内部。官方文档强调“当使用nzExpand属性时添加nzExpandIcon自定义展开图标”即两者应配合使用单独设置nzExpandIcon而不启用展开行不会产生预期效果。自定义图标不限于nz-icon可以是任意内联模板内容如自定义 SVG、文字按钮等只要自己处理点击与状态切换即可。五、测试如何验证这一行为仓库在 components/table/src/testing/td.spec.ts 中针对td的展开行为有完整测试覆盖例如初始状态下td内默认按钮带有ant-table-row-expand-icon-collapsed类当expand信号置为true后类名变为ant-table-row-expand-icon-expanded模拟点击按钮后expandChange回调被调用一次且状态类随之切换。这些测试从行为层面验证了“展开状态 → 图标状态”的映射关系。若使用nzExpandIcon自定义模板默认按钮及其类名不再出现取而代之的是你传入的模板内容——这正好解释了为什么示例代码需要自己在模板内依据expandSet手动切换加号/减号图标。六、小结展开行td上的[nzExpand] 紧随其后的[nzExpand]内容行配合(nzExpandChange)同步状态默认图标ant-table-row-expand-icon按钮自动处理点击取反row-expand-button.directive.ts自定义图标[nzExpandIcon]templateRef完全替换默认按钮td-addon.component.ts模板内自行维护展开/收起状态参考实现components/table/demo/expand-icon.ts可直接复制改造。按此方案你可以在不侵入组件内部逻辑的前提下用任意自定义图标实现表格行的展开/收起满足产品层面的个性化视觉需求。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Cascader 前后缀与图标自定义nzPrefix / nzSuffixIcon / nzExpandIcon 完整实战指南ng zorro antd Cascader 前后缀与图标自定义nzPrefix / nzSuffixIcon / nzExpandIcon 完整实战指南 CUI组件前端ng-zorro-antd Popconfirm 自定义图标nzIcon实战指南从字符串到模板再到完全隐藏ng zorro antd Popconfirm 自定义图标nzIcon实战指南从字符串到模板再到完全隐藏 本文聚焦 ng zorro antd 气泡确认UI组件前端ng-zorro-antd QRCode 组件自定义填充nzPadding完全指南从 Demo 到源码实现ng zorro antd QRCode 组件自定义填充nzPadding完全指南从 Demo 到源码实现 导读 本文围绕 ng zorro antdAUI组件前端上一篇Cursor Pro功能扩展解决方案技术原理与实施指南下一篇GetQzonehistory5分钟搞定QQ空间历史数据备份的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 在 ng-zorro-antd 表格中自定义展开图标（nzExpandIcon）：从模板到源码实现
UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载本指南聚焦 ng-zorro-antdnz-table的展开行功能讲解如何通过td上的nzExpand属性启用行展开并用nzExpandIcon完全替换默认的展开/收起箭头图标。读完本文你将掌握自定义展开图标的模板写法、状态同步要点以及该 API 在组件源码中的真实渲染逻辑可直接照抄到自己的业务表格中。一、背景表格的可展开行机制当表格内容较多、无法一次性完整展示时ng-zorro-antd 提供了“可展开行”能力在tbody内的每一组tr后紧跟一行展开内容区并通过td上的nzExpand属性控制该行是否展开。官方示例见 components/table/demo/expand.md 与 components/table/demo/expand.ts其核心写法是nz-table #nzTable [nzData]listOfData nzTableLayoutfixed tbody for (data of nzTable.data; track data.id) { tr td [nzExpand]expandSet.has(data.id) (nzExpandChange)onExpandChange(data.id, $event)/td !-- 其他单元格 -- /tr tr [nzExpand]expandSet.has(data.id) span{{ data.description }}/span /tr } /tbody /nz-table要点是[nzExpand]绑定当前行的展开状态布尔值(nzExpandChange)在展开状态变化时回传新的布尔值用于把状态写回组件紧随其后的tr [nzExpand]...是展开内容区状态与首行同步。二、默认展开按钮长什么样在不做任何定制时ng-zorro-antd 会渲染一个内置的展开按钮其样式由 components/table/src/addon/row-expand-button.directive.ts 控制Directive({ selector: button[nz-row-expand-button], host: { class: ant-table-row-expand-icon, [class.ant-table-row-expand-icon-expanded]: !spaceMode expand true, [class.ant-table-row-expand-icon-collapsed]: !spaceMode expand false, (click): onHostClick() } }) export class NzRowExpandButtonDirective { Input() expand false; Input() spaceMode false; Output() readonly expandChange new EventEmitter(); // 点击时取反 expand并对外发射 expandChange }可见默认按钮本质是一个带ant-table-row-expand-icon类名的button展开/收起分别对应ant-table-row-expand-icon-expanded与ant-table-row-expand-icon-collapsed两个状态类。spaceMode用于在“无展开功能但需占位缩进”的场景下渲染占位空隙。三、用 nzExpandIcon 替换默认图标默认箭头图标无法满足所有产品需求例如需要加号/减号、自定义业务语义图标。此时只需在td上同时传入nzExpandIconng-zorro-antd 就会完全用你的模板替换默认按钮。官方示例见 components/table/demo/expand-icon.md 与其配套实现 components/table/demo/expand-icon.ts。完整可运行的组件代码如下import { Component } from angular/core; import { NzIconModule } from ng-zorro-antd/icon; import { NzTableModule } from ng-zorro-antd/table; Component({ selector: nz-demo-table-expand-icon, imports: [NzIconModule, NzTableModule], template: nz-table #nzTable [nzData]listOfData nzTableLayoutfixed thead tr th nzWidth60px/th thName/th thAge/th thAddress/th /tr /thead tbody for (data of nzTable.data; track data.id) { tr td [nzExpand]expandSet.has(data.id) [nzExpandIcon]expandIcon/td td{{ data.name }}/td td{{ data.age }}/td td{{ data.address }}/td /tr tr [nzExpand]expandSet.has(data.id) span{{ data.description }}/span /tr ng-template #expandIcon if (!expandSet.has(data.id)) { nz-icon nzTypeplus-circle nzThemeoutline (click)onExpandChange(data.id, true) / } else { nz-icon nzTypeminus-circle nzThemeoutline (click)onExpandChange(data.id, false) / } /ng-template } /tbody /nz-table }) export class NzDemoTableExpandIconComponent { expandSet new Setnumber(); onExpandChange(id: number, checked: boolean): void { if (checked) { this.expandSet.add(id); } else { this.expandSet.delete(id); } } listOfData [ { id: 1, name: John Brown, age: 32, address: New York No. 1 Lake Park, description: My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park. }, { id: 2, name: Jim Green, age: 42, address: London No. 1 Lake Park, description: My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park. }, { id: 3, name: Joe Black, age: 32, address: Sidney No. 1 Lake Park, description: My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park. } ]; }3.1 写法拆解声明模板引用变量在for循环内通过ng-template #expandIcon定义展开图标模板#expandIcon就是传给nzExpandIcon的TemplateRef。绑定到单元格td [nzExpand]expandSet.has(data.id) [nzExpandIcon]expandIcon两个属性缺一不可——nzExpand负责展开逻辑nzExpandIcon负责渲染自定义图标。状态自管理示例用expandSet: Setnumber记录已展开行的 id模板内根据expandSet.has(data.id)决定显示加号还是减号。点击即切换图标上的(click)调用onExpandChange(data.id, true/false)内部对Set做 add/delete驱动[nzExpand]重新求值展开内容区随之显隐。3.2 为什么这样写就能生效从源码看td的附加行为由 components/table/src/cell/td-addon.component.ts 中的NzTdAddOnComponent实现其模板逻辑是if (nzShowExpand || nzIndentSize 0) { nz-row-indent [indentSize]nzIndentSize / if (nzExpandIcon) { ng-template [ngTemplateOutlet]nzExpandIcon / } else { button nz-row-expand-button [expand]nzExpand (expandChange)onExpandChange($event) [spaceMode]!nzShowExpand/button } }对应的输入属性定义为Input({ transform: booleanAttribute }) nzExpand false; Input() nzExpandIcon: TemplateRefvoid | null null; Output() readonly nzExpandChange new EventEmitterboolean();由此可以确认以下几点实现事实nzExpandIcon的类型是TemplateRefvoid默认值为null只要传入非空模板if (nzExpandIcon)分支就会命中默认的nz-row-expand-button按钮不再渲染实现“完全替换”。模板通过ngTemplateOutlet渲染因此自定义图标里可以使用循环变量data、组件方法等一切当前作用域内的能力。自定义模板内的点击事件需要自行处理并维护展开状态示例中写回expandSet而默认按钮则由指令内部onHostClick()自动取反并 emitexpandChange。这是两种模式最重要的差异点。四、API 与取值说明在 components/table/doc/index.zh-CN.md 的 API 表中与本功能相关的接口定义如下参数说明类型默认值[nzExpand]当前行是否展开boolean-[nzExpandIcon]自定义展开图标TemplateRefvoid-(nzExpandChange)展开状态变化回调EventEmitterboolean-实用注意事项nzExpandIcon只有在nzExpand或其触发的nzShowExpand生效的单元格上才有意义从源码可见图标渲染分支位于if (nzShowExpand || nzIndentSize 0)内部。官方文档强调“当使用nzExpand属性时添加nzExpandIcon自定义展开图标”即两者应配合使用单独设置nzExpandIcon而不启用展开行不会产生预期效果。自定义图标不限于nz-icon可以是任意内联模板内容如自定义 SVG、文字按钮等只要自己处理点击与状态切换即可。五、测试如何验证这一行为仓库在 components/table/src/testing/td.spec.ts 中针对td的展开行为有完整测试覆盖例如初始状态下td内默认按钮带有ant-table-row-expand-icon-collapsed类当expand信号置为true后类名变为ant-table-row-expand-icon-expanded模拟点击按钮后expandChange回调被调用一次且状态类随之切换。这些测试从行为层面验证了“展开状态 → 图标状态”的映射关系。若使用nzExpandIcon自定义模板默认按钮及其类名不再出现取而代之的是你传入的模板内容——这正好解释了为什么示例代码需要自己在模板内依据expandSet手动切换加号/减号图标。六、小结展开行td上的[nzExpand] 紧随其后的[nzExpand]内容行配合(nzExpandChange)同步状态默认图标ant-table-row-expand-icon按钮自动处理点击取反row-expand-button.directive.ts自定义图标[nzExpandIcon]templateRef完全替换默认按钮td-addon.component.ts模板内自行维护展开/收起状态参考实现components/table/demo/expand-icon.ts可直接复制改造。按此方案你可以在不侵入组件内部逻辑的前提下用任意自定义图标实现表格行的展开/收起满足产品层面的个性化视觉需求。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Cascader 前后缀与图标自定义nzPrefix / nzSuffixIcon / nzExpandIcon 完整实战指南ng zorro antd Cascader 前后缀与图标自定义nzPrefix / nzSuffixIcon / nzExpandIcon 完整实战指南 CUI组件前端ng-zorro-antd Popconfirm 自定义图标nzIcon实战指南从字符串到模板再到完全隐藏ng zorro antd Popconfirm 自定义图标nzIcon实战指南从字符串到模板再到完全隐藏 本文聚焦 ng zorro antd 气泡确认UI组件前端ng-zorro-antd QRCode 组件自定义填充nzPadding完全指南从 Demo 到源码实现ng zorro antd QRCode 组件自定义填充nzPadding完全指南从 Demo 到源码实现 导读 本文围绕 ng zorro antdAUI组件前端上一篇Cursor Pro功能扩展解决方案技术原理与实施指南下一篇GetQzonehistory5分钟搞定QQ空间历史数据备份的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考