UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载nz-statistic是 ng-zorro-antd 中用于展示统计数字的数据展示组件它把一个或一组关键数值连同标题、前缀、后缀、加载态呈现出来是数据看板、运营后台、监控大屏里最高频的数字卡片形态。本篇文章以官方演示中排在第一位的 basic 基本用法对应实现 basic.ts为骨架逐行拆解这份最小可运行示例并深入到 statistic.component.ts、statistic-content-value.component.ts 等源码与配套测试帮助你彻底掌握nz-statistic的输入属性、渲染管线、数字格式化、加载态与自定义模板读完即可在自己的 Angular 项目中落地同款数字卡片。从一份最小演示说起basic 用法的全貌在官方文档站中基本用法Basic Usage被标记为order: 0是所有 Statistic 演示的起点其描述只有一句话简单的展示 / Simplest Usage.。技术实质全部落在配套的演示组件里。这份 basic.ts 完整代码非常值得逐行阅读import { DecimalPipe } from angular/common; import { Component } from angular/core; import { NzButtonModule } from ng-zorro-antd/button; import { NzGridModule } from ng-zorro-antd/grid; import { NzStatisticModule } from ng-zorro-antd/statistic; Component({ selector: nz-demo-statistic-basic, imports: [DecimalPipe, NzButtonModule, NzGridModule, NzStatisticModule], template: nz-row [nzGutter]16 nz-col [nzSpan]12 nz-statistic [nzValue](1949101 | number)! nzTitleActive Users / /nz-col nz-col [nzSpan]12 nz-statistic [nzValue](2019.111 | number: 1.0-2)! nzTitleAccount Balance (CNY) / button nz-button nzTypeprimary [style.margin-top.px]16Recharge/button /nz-col nz-col [nzSpan]12 nz-statistic [nzValue](112893 | number: 1.0-2)! nzTitleActive Users nzLoading / /nz-col /nz-row }) export class NzDemoStatisticBasicComponent {}这份演示用三个nz-statistic展示了基本用法的全部要素栅格布局外层用nz-row/nz-col来自ng-zorro-antd/grid把卡片排成两列[nzGutter]16控制列间距。Statistic 本身不关心布局因此可自由嵌入任意 Grid、Card 或 Flex 容器。纯数字展示[nzValue](1949101 | number)!绑定一个数值nzTitleActive Users提供标题文字。这是最基本的形态——一个数字加一句说明。数字格式化(2019.111 | number: 1.0-2)!通过 Angular 内置DecimalPipe把小数位控制在 0~2 位!非空断言是因为number管道返回string | null。加载态第三个卡片直接写了nzLoading等价于[nzLoading]true数值区域会被骨架屏替换适用于异步拉取统计数据的场景。组件使用imports数组以 Standalone 方式直接引入NzStatisticModule也可在传统 NgModule 的imports中引入二者等价。nz-statistic 核心 API 全景官方 API 文档 components/statistic/doc/index.zh-CN.md 给出了nz-statistic的完整参数表这也是基本用法之上进一步定制数字卡片的地基参数说明类型默认值[nzPrefix]设置数值的前缀string \| TemplateRefvoid-[nzSuffix]设置数值的后缀string \| TemplateRefvoid-[nzTitle]数值的标题string \| TemplateRefvoid-[nzValue]数值内容string \| number-[nzValueStyle]设置数值的样式Object-[nzValueTemplate]自定义数值展示TemplateRef{ $implicit: string \| number }-[nzLoading]数值是否加载中booleanfalse对照源码 statistic.component.ts每个输入属性都能找到一一对应的声明Input() nzPrefix?: string | TemplateRefvoid; Input() nzSuffix?: string | TemplateRefvoid; Input() nzTitle?: string | TemplateRefvoid; Input() nzValue?: NzStatisticValueType; Input() nzValueStyle: NgStyleInterface {}; Input() nzValueTemplate?: TemplateRef{ $implicit: NzStatisticValueType }; Input({ transform: booleanAttribute }) nzLoading: boolean false;几个值得注意的实现细节nzValue的类型来自 typings.ts 中的NzStatisticValueType number | string即它同时接受数值和字符串字符串形态下内部不再走数字拆分逻辑见下文。nzLoading使用 Angular 的booleanAttribute转换器因此模板里写nzLoading或nzLoadingtrue都能生效这与 basic 演示中直接写nzLoading的写法相互印证。nzValueStyle默认值是空对象{}类型为NgStyleInterface来自ng-zorro-antd/core/types用于给数值区注入内联样式。nzPrefix/nzSuffix/nzTitle均支持字符串或TemplateRefvoid配合组件内部引入的nzStringTemplateOutlet结构指令实现字符串直接渲染、模板自定义渲染的双模式。渲染管线title / content / prefix / suffix 如何拼装nz-statistic的输出结构并非一整块文本而是按语义分成若干 CSS 节点。查看 statistic.component.ts 的模板即可看清拼装顺序div classant-statistic-title ng-container *nzStringTemplateOutletnzTitle{{ nzTitle }}/ng-container /div if (nzLoading) { nz-skeleton classant-statistic-skeleton [nzParagraph]false / } else { div classant-statistic-content [style]nzValueStyle if (nzPrefix) { span classant-statistic-content-prefix ng-container *nzStringTemplateOutletnzPrefix{{ nzPrefix }}/ng-container /span } nz-statistic-content-value [nzValue]nzValue [nzValueTemplate]nzValueTemplate / if (nzSuffix) { span classant-statistic-content-suffix ng-container *nzStringTemplateOutletnzSuffix{{ nzSuffix }}/ng-container /span } /div }渲染顺序是固定的标题 →加载态骨架屏 或 内容区→ 内容区内部再按前缀 → 数值 → 后缀排列。这就解释了为什么后缀如%、/ 100会紧贴在数字后面而前缀如图标、¥会出现在数字前面——它们是三个独立的 DOM 节点方便样式与对齐控制。数值部分被抽成了内部子组件nz-statistic-content-value见 statistic-content-value.component.ts它承担两项职责模板优先只要传入nzValueTemplate就通过ngTemplateOutlet以{ $implicit: nzValue }作为上下文渲染自定义模板完全接管数值展示默认拆分否则把数值拆成整数部分与小数部分分别渲染为.ant-statistic-content-value-int与.ant-statistic-content-value-decimal便于对整数位与小数位做差异化样式。组件宿主元素上还有 RTL 适配当全局方向为rtl时自动添加ant-statistic-rtl类statistic.component.ts该行为在 statistic.component.spec.ts 中通过testDirectionality断言验证。数字格式化的两种途径DecimalPipe 与内部拆分在 basic 演示中千分位与小数位控制都来自模板里的number管道DecimalPipe例如(1949101 | number)会把数值格式化为带千分位分隔的形式1.0-2表示整数位最少 1 位、小数位 0~2 位。这是模板层的格式化手段由 Angular 框架提供与组件本身无关。而组件内部的拆分逻辑位于 statistic-content-value.component.tsprivate formatNumber(): void { const decimalSeparator: string typeof this.nzValue number ? . : getLocaleNumberSymbol(this.locale_id, NumberSymbol.Decimal); const value String(this.nzValue); const [int, decimal] value.split(decimalSeparator); this.displayInt int; this.displayDecimal decimal ? ${decimalSeparator}${decimal} : ; }注意当nzValue是number类型时小数点固定用.当它是string时会通过LOCALE_ID读取当前语言环境下的小数点符号例如某些 locale 使用,来分割。也就是说组件本身不负责千分位格式化——如果希望数字带千分位要么在模板里用DecimalPipe如 basic 演示的做法要么通过nzValueTemplate自定义渲染。这个边界搞清楚后就不会误以为nzValue传原始数值就会自动带逗号。加载态与骨架屏nzLoading是基本用法里最常被忽视却又极其实用的属性。从 statistic.component.ts 可以看到当它为true时整个内容区含前缀、数值、后缀被替换为一个nz-skeleton骨架屏if (nzLoading) { nz-skeleton classant-statistic-skeleton [nzParagraph]false / }骨架屏只保留标题占位[nzParagraph]false关闭段落行宽度模拟数字区域的形状配合 CSS 类ant-statistic-skeleton实现与真实数字接近的占位效果。这在统计接口未返回、数据仍在请求中的场景下能有效避免数字先出现再跳变的闪烁体验。对应测试见 statistic.component.spec.ts初始不渲染骨架将loading置为true后断言.ant-statistic-skeleton出现同时该测试还验证了 title / prefix / suffix 的渲染statistic.component.spec.ts。自定义展示前缀、后缀与完全自定义模板basic 演示只覆盖了默认渲染但同目录下的其他演示把定制能力补全了字符串式前缀/后缀在 unit.ts 中nzSuffix/ 100直接在数字后追加单位nzPrefix则传入一个模板在数字前渲染一个nz-icon图标nz-statistic [nzValue](1128 | number)! nzTitleFeedback [nzPrefix]prefixTpl / ng-template #prefixTplnz-icon nzTypelike //ng-template数值样式在 card.ts 中通过[nzValueStyle]{ color: #3F8600 }把上涨数字染成绿色、{ color: #CF1322 }把下跌数字染成红色这是股票、监控类看板最常见的配色用法。完全自定义数值若默认的整数/小数拆分满足不了需求例如要展示日期、百分比动画或复杂文本使用nzValueTemplate模板上下文$implicit即当前nzValue。其消费逻辑在 statistic-content-value.component.ts 中实现if (nzValueTemplate) { ng-container [ngTemplateOutlet]nzValueTemplate [ngTemplateOutletContext]{ $implicit: nzValue } / }同模块的扩展用法卡片场景与倒计时Statistic 组件族还包括倒计时形态nz-countdown它复用nz-statistic的全部展示能力只在数值层做差异。实现见 countdown.component.ts继承NzStatisticComponent把diff目标时间与当前时间之差作为nzValue传给内部nz-statistic并用nzTimeRange: nzFormat管道按格式渲染countdown.component.ts默认格式nzFormat HH:mm:ss格式化占位符规则由官方文档定义Y年、M月、D日、H时、m分、s秒、S毫秒components/statistic/doc/index.zh-CN.md 中nzFormat一节可组合出如D 天 H 时 m 分 s 秒的中文倒计时刷新采用高频但节制的策略REFRESH_INTERVAL 1000 / 30约 33ms并借助ngZone.runOutsideAngular把定时器移出 Angular zone仅用cdr.detectChanges()局部刷新避免整棵组件树反复变更检测countdown.component.ts倒计时归零时停止定时器并触发(nzCountdownFinish)事件countdown.component.ts。在卡片中使用则只需把nz-statistic放进nz-card见 card.ts 与 card.mdStatistic 不依赖任何特定容器与 Card、Grid、List 等组件的组合是官方推荐的数据看板写法。nz-countdown的完整参数含nzFormat、nzPrefix、nzSuffix、nzTitle、nzValue、nzValueTemplate、nzCountdownFinish同样继承自 components/statistic/doc/index.zh-CN.md 的 API 表使用时以该表为准。接入项目与可验证性在业务项目中使用只需引入ng-zorro-antd/statistic的模块Standalone 场景下在组件imports中声明NzStatisticModule见 basic.ts模块与公开 API 的导出入口分别是 statistic.module.ts 与 public-api.ts。如果你想验证本文提到的行为仓库自带的测试是最直接的证据statistic.component.spec.ts断言 title / prefix / suffix 的渲染与条件展示、骨架屏切换、RTL 方向类countdown.component.spec.ts使用 Vitest 假定时器vi.useFakeTimers验证倒计时数字随推进时间变化、目标时间早于当前时归零停止、自定义模板渲染以及归零后nzCountdownFinish恰好触发一次countdown.component.spec.ts。仓库根目录的 vitest.config.mjs 是组件库的测试运行配置配合上述 spec 即可在本地复现全部行为断言。小结nz-statistic的基本用法看似只是一行标签 一个数值但背后是清晰的职责划分栅格负责布局、DecimalPipe负责格式化、组件内部负责把数值拆成可定制的 DOM 节点、nzLoading负责加载态过渡、TemplateRef输入负责完全自定义。把握住 basic.ts 这份最小示例以及 statistic.component.ts 的渲染管线就能从会摆一个数字进阶到能按业务需要组装任何形态的统计卡片再结合nz-countdown与 Card 场景即可覆盖绝大多数数据看板需求。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Statistic 组件完全指南统计数字展示与倒计时实战ng zorro antd Statistic 组件完全指南统计数字展示与倒计时实战 导读 本文围绕 Angular UI 组件库 ng zorro antdUI组件前端ng-zorro-antd Statistic 组件单位显示指南用 nzPrefix 与 nzSuffix 为统计数字添加单位ng zorro antd Statistic 组件单位显示指南用 nzPrefix 与 nzSuffix 为统计数字添加单位 在数据展示场景中统计数字往往UI组件前端ng-zorro-antd Statistic 倒计时组件nz-countdown完全指南格式化、事件与源码实现ng zorro antd Statistic 倒计时组件nz countdown完全指南格式化、事件与源码实现 导读 本文是围绕 ng zorro anUI组件前端上一篇【亲测免费】 Yi-VL-34B模型性能评估与测试方法下一篇突破性能瓶颈GPT-Neo 1.3B模型架构解析与量化部署指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
ng-zorro-antd Statistic 组件基本用法实战：数字展示、格式化与加载态全解析
UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载nz-statistic是 ng-zorro-antd 中用于展示统计数字的数据展示组件它把一个或一组关键数值连同标题、前缀、后缀、加载态呈现出来是数据看板、运营后台、监控大屏里最高频的数字卡片形态。本篇文章以官方演示中排在第一位的 basic 基本用法对应实现 basic.ts为骨架逐行拆解这份最小可运行示例并深入到 statistic.component.ts、statistic-content-value.component.ts 等源码与配套测试帮助你彻底掌握nz-statistic的输入属性、渲染管线、数字格式化、加载态与自定义模板读完即可在自己的 Angular 项目中落地同款数字卡片。从一份最小演示说起basic 用法的全貌在官方文档站中基本用法Basic Usage被标记为order: 0是所有 Statistic 演示的起点其描述只有一句话简单的展示 / Simplest Usage.。技术实质全部落在配套的演示组件里。这份 basic.ts 完整代码非常值得逐行阅读import { DecimalPipe } from angular/common; import { Component } from angular/core; import { NzButtonModule } from ng-zorro-antd/button; import { NzGridModule } from ng-zorro-antd/grid; import { NzStatisticModule } from ng-zorro-antd/statistic; Component({ selector: nz-demo-statistic-basic, imports: [DecimalPipe, NzButtonModule, NzGridModule, NzStatisticModule], template: nz-row [nzGutter]16 nz-col [nzSpan]12 nz-statistic [nzValue](1949101 | number)! nzTitleActive Users / /nz-col nz-col [nzSpan]12 nz-statistic [nzValue](2019.111 | number: 1.0-2)! nzTitleAccount Balance (CNY) / button nz-button nzTypeprimary [style.margin-top.px]16Recharge/button /nz-col nz-col [nzSpan]12 nz-statistic [nzValue](112893 | number: 1.0-2)! nzTitleActive Users nzLoading / /nz-col /nz-row }) export class NzDemoStatisticBasicComponent {}这份演示用三个nz-statistic展示了基本用法的全部要素栅格布局外层用nz-row/nz-col来自ng-zorro-antd/grid把卡片排成两列[nzGutter]16控制列间距。Statistic 本身不关心布局因此可自由嵌入任意 Grid、Card 或 Flex 容器。纯数字展示[nzValue](1949101 | number)!绑定一个数值nzTitleActive Users提供标题文字。这是最基本的形态——一个数字加一句说明。数字格式化(2019.111 | number: 1.0-2)!通过 Angular 内置DecimalPipe把小数位控制在 0~2 位!非空断言是因为number管道返回string | null。加载态第三个卡片直接写了nzLoading等价于[nzLoading]true数值区域会被骨架屏替换适用于异步拉取统计数据的场景。组件使用imports数组以 Standalone 方式直接引入NzStatisticModule也可在传统 NgModule 的imports中引入二者等价。nz-statistic 核心 API 全景官方 API 文档 components/statistic/doc/index.zh-CN.md 给出了nz-statistic的完整参数表这也是基本用法之上进一步定制数字卡片的地基参数说明类型默认值[nzPrefix]设置数值的前缀string \| TemplateRefvoid-[nzSuffix]设置数值的后缀string \| TemplateRefvoid-[nzTitle]数值的标题string \| TemplateRefvoid-[nzValue]数值内容string \| number-[nzValueStyle]设置数值的样式Object-[nzValueTemplate]自定义数值展示TemplateRef{ $implicit: string \| number }-[nzLoading]数值是否加载中booleanfalse对照源码 statistic.component.ts每个输入属性都能找到一一对应的声明Input() nzPrefix?: string | TemplateRefvoid; Input() nzSuffix?: string | TemplateRefvoid; Input() nzTitle?: string | TemplateRefvoid; Input() nzValue?: NzStatisticValueType; Input() nzValueStyle: NgStyleInterface {}; Input() nzValueTemplate?: TemplateRef{ $implicit: NzStatisticValueType }; Input({ transform: booleanAttribute }) nzLoading: boolean false;几个值得注意的实现细节nzValue的类型来自 typings.ts 中的NzStatisticValueType number | string即它同时接受数值和字符串字符串形态下内部不再走数字拆分逻辑见下文。nzLoading使用 Angular 的booleanAttribute转换器因此模板里写nzLoading或nzLoadingtrue都能生效这与 basic 演示中直接写nzLoading的写法相互印证。nzValueStyle默认值是空对象{}类型为NgStyleInterface来自ng-zorro-antd/core/types用于给数值区注入内联样式。nzPrefix/nzSuffix/nzTitle均支持字符串或TemplateRefvoid配合组件内部引入的nzStringTemplateOutlet结构指令实现字符串直接渲染、模板自定义渲染的双模式。渲染管线title / content / prefix / suffix 如何拼装nz-statistic的输出结构并非一整块文本而是按语义分成若干 CSS 节点。查看 statistic.component.ts 的模板即可看清拼装顺序div classant-statistic-title ng-container *nzStringTemplateOutletnzTitle{{ nzTitle }}/ng-container /div if (nzLoading) { nz-skeleton classant-statistic-skeleton [nzParagraph]false / } else { div classant-statistic-content [style]nzValueStyle if (nzPrefix) { span classant-statistic-content-prefix ng-container *nzStringTemplateOutletnzPrefix{{ nzPrefix }}/ng-container /span } nz-statistic-content-value [nzValue]nzValue [nzValueTemplate]nzValueTemplate / if (nzSuffix) { span classant-statistic-content-suffix ng-container *nzStringTemplateOutletnzSuffix{{ nzSuffix }}/ng-container /span } /div }渲染顺序是固定的标题 →加载态骨架屏 或 内容区→ 内容区内部再按前缀 → 数值 → 后缀排列。这就解释了为什么后缀如%、/ 100会紧贴在数字后面而前缀如图标、¥会出现在数字前面——它们是三个独立的 DOM 节点方便样式与对齐控制。数值部分被抽成了内部子组件nz-statistic-content-value见 statistic-content-value.component.ts它承担两项职责模板优先只要传入nzValueTemplate就通过ngTemplateOutlet以{ $implicit: nzValue }作为上下文渲染自定义模板完全接管数值展示默认拆分否则把数值拆成整数部分与小数部分分别渲染为.ant-statistic-content-value-int与.ant-statistic-content-value-decimal便于对整数位与小数位做差异化样式。组件宿主元素上还有 RTL 适配当全局方向为rtl时自动添加ant-statistic-rtl类statistic.component.ts该行为在 statistic.component.spec.ts 中通过testDirectionality断言验证。数字格式化的两种途径DecimalPipe 与内部拆分在 basic 演示中千分位与小数位控制都来自模板里的number管道DecimalPipe例如(1949101 | number)会把数值格式化为带千分位分隔的形式1.0-2表示整数位最少 1 位、小数位 0~2 位。这是模板层的格式化手段由 Angular 框架提供与组件本身无关。而组件内部的拆分逻辑位于 statistic-content-value.component.tsprivate formatNumber(): void { const decimalSeparator: string typeof this.nzValue number ? . : getLocaleNumberSymbol(this.locale_id, NumberSymbol.Decimal); const value String(this.nzValue); const [int, decimal] value.split(decimalSeparator); this.displayInt int; this.displayDecimal decimal ? ${decimalSeparator}${decimal} : ; }注意当nzValue是number类型时小数点固定用.当它是string时会通过LOCALE_ID读取当前语言环境下的小数点符号例如某些 locale 使用,来分割。也就是说组件本身不负责千分位格式化——如果希望数字带千分位要么在模板里用DecimalPipe如 basic 演示的做法要么通过nzValueTemplate自定义渲染。这个边界搞清楚后就不会误以为nzValue传原始数值就会自动带逗号。加载态与骨架屏nzLoading是基本用法里最常被忽视却又极其实用的属性。从 statistic.component.ts 可以看到当它为true时整个内容区含前缀、数值、后缀被替换为一个nz-skeleton骨架屏if (nzLoading) { nz-skeleton classant-statistic-skeleton [nzParagraph]false / }骨架屏只保留标题占位[nzParagraph]false关闭段落行宽度模拟数字区域的形状配合 CSS 类ant-statistic-skeleton实现与真实数字接近的占位效果。这在统计接口未返回、数据仍在请求中的场景下能有效避免数字先出现再跳变的闪烁体验。对应测试见 statistic.component.spec.ts初始不渲染骨架将loading置为true后断言.ant-statistic-skeleton出现同时该测试还验证了 title / prefix / suffix 的渲染statistic.component.spec.ts。自定义展示前缀、后缀与完全自定义模板basic 演示只覆盖了默认渲染但同目录下的其他演示把定制能力补全了字符串式前缀/后缀在 unit.ts 中nzSuffix/ 100直接在数字后追加单位nzPrefix则传入一个模板在数字前渲染一个nz-icon图标nz-statistic [nzValue](1128 | number)! nzTitleFeedback [nzPrefix]prefixTpl / ng-template #prefixTplnz-icon nzTypelike //ng-template数值样式在 card.ts 中通过[nzValueStyle]{ color: #3F8600 }把上涨数字染成绿色、{ color: #CF1322 }把下跌数字染成红色这是股票、监控类看板最常见的配色用法。完全自定义数值若默认的整数/小数拆分满足不了需求例如要展示日期、百分比动画或复杂文本使用nzValueTemplate模板上下文$implicit即当前nzValue。其消费逻辑在 statistic-content-value.component.ts 中实现if (nzValueTemplate) { ng-container [ngTemplateOutlet]nzValueTemplate [ngTemplateOutletContext]{ $implicit: nzValue } / }同模块的扩展用法卡片场景与倒计时Statistic 组件族还包括倒计时形态nz-countdown它复用nz-statistic的全部展示能力只在数值层做差异。实现见 countdown.component.ts继承NzStatisticComponent把diff目标时间与当前时间之差作为nzValue传给内部nz-statistic并用nzTimeRange: nzFormat管道按格式渲染countdown.component.ts默认格式nzFormat HH:mm:ss格式化占位符规则由官方文档定义Y年、M月、D日、H时、m分、s秒、S毫秒components/statistic/doc/index.zh-CN.md 中nzFormat一节可组合出如D 天 H 时 m 分 s 秒的中文倒计时刷新采用高频但节制的策略REFRESH_INTERVAL 1000 / 30约 33ms并借助ngZone.runOutsideAngular把定时器移出 Angular zone仅用cdr.detectChanges()局部刷新避免整棵组件树反复变更检测countdown.component.ts倒计时归零时停止定时器并触发(nzCountdownFinish)事件countdown.component.ts。在卡片中使用则只需把nz-statistic放进nz-card见 card.ts 与 card.mdStatistic 不依赖任何特定容器与 Card、Grid、List 等组件的组合是官方推荐的数据看板写法。nz-countdown的完整参数含nzFormat、nzPrefix、nzSuffix、nzTitle、nzValue、nzValueTemplate、nzCountdownFinish同样继承自 components/statistic/doc/index.zh-CN.md 的 API 表使用时以该表为准。接入项目与可验证性在业务项目中使用只需引入ng-zorro-antd/statistic的模块Standalone 场景下在组件imports中声明NzStatisticModule见 basic.ts模块与公开 API 的导出入口分别是 statistic.module.ts 与 public-api.ts。如果你想验证本文提到的行为仓库自带的测试是最直接的证据statistic.component.spec.ts断言 title / prefix / suffix 的渲染与条件展示、骨架屏切换、RTL 方向类countdown.component.spec.ts使用 Vitest 假定时器vi.useFakeTimers验证倒计时数字随推进时间变化、目标时间早于当前时归零停止、自定义模板渲染以及归零后nzCountdownFinish恰好触发一次countdown.component.spec.ts。仓库根目录的 vitest.config.mjs 是组件库的测试运行配置配合上述 spec 即可在本地复现全部行为断言。小结nz-statistic的基本用法看似只是一行标签 一个数值但背后是清晰的职责划分栅格负责布局、DecimalPipe负责格式化、组件内部负责把数值拆成可定制的 DOM 节点、nzLoading负责加载态过渡、TemplateRef输入负责完全自定义。把握住 basic.ts 这份最小示例以及 statistic.component.ts 的渲染管线就能从会摆一个数字进阶到能按业务需要组装任何形态的统计卡片再结合nz-countdown与 Card 场景即可覆盖绝大多数数据看板需求。赞分享UI组件前端【免费下载链接】ng-zorro-antdAngular UI Component Library based on Ant Design项目地址https://gitcode.com/gh_mirrors/ng/ng-zorro-antd点击查看免费下载相关推荐ng-zorro-antd Statistic 组件完全指南统计数字展示与倒计时实战ng zorro antd Statistic 组件完全指南统计数字展示与倒计时实战 导读 本文围绕 Angular UI 组件库 ng zorro antdUI组件前端ng-zorro-antd Statistic 组件单位显示指南用 nzPrefix 与 nzSuffix 为统计数字添加单位ng zorro antd Statistic 组件单位显示指南用 nzPrefix 与 nzSuffix 为统计数字添加单位 在数据展示场景中统计数字往往UI组件前端ng-zorro-antd Statistic 倒计时组件nz-countdown完全指南格式化、事件与源码实现ng zorro antd Statistic 倒计时组件nz countdown完全指南格式化、事件与源码实现 导读 本文是围绕 ng zorro anUI组件前端上一篇【亲测免费】 Yi-VL-34B模型性能评估与测试方法下一篇突破性能瓶颈GPT-Neo 1.3B模型架构解析与量化部署指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
