Angular 6中如何在*ngFor外部显示生成的系列数量

作为Angular新手碰到这种循环外取数据数量的问题很正常，我来给你一步步讲清楚怎么搞定：

方法一：组件内存储计数（推荐，性能更好） #

这种方式避免了模板里频繁调用方法导致的性能问题，步骤如下：

1. 在组件类中添加计数属性
   在你的组件.ts文件里，定义一个用来存系列数量的属性，比如：

   certCount: number = 0;
   // 假设你的原始数据是这个，或者是通过@Input进来的
   rawCertsData: any;
   

2. 在数据更新时计算计数
   不管你的数据是初始化加载、通过接口获取，还是通过输入属性传入的，都要在数据准备好后计算键的数量。比如：

   • 如果是初始化时就有数据，放在ngOnInit里：

     ngOnInit(): void {
       // 先确保formatedCerts()能返回正确的对象
       const formatted = this.formatedCerts();
       this.certCount = Object.keys(formatted).length;
     }
     

   • 如果数据是动态变化的（比如通过接口请求回来，或者父组件传入的输入属性变化），可以用ngOnChanges监听，或者在数据更新的回调里计算：

     // 比如接口请求后的回调
     fetchCertsData(): void {
       this.yourService.getCerts().subscribe(data => {
         this.rawCertsData = data;
         // 数据更新后重新计算计数
         const formatted = this.formatedCerts();
         this.certCount = Object.keys(formatted).length;
       });
     }
     
     // 或者监听输入属性变化
     ngOnChanges(changes: SimpleChanges): void {
       if (changes['rawCertsData']) {
         const formatted = this.formatedCerts();
         this.certCount = Object.keys(formatted).length;
       }
     }
     

3. 模板中直接引用计数属性
   在组件顶部直接用插值表达式显示：

   <div>共 {{ certCount }} 个系列</div>
   
   <!-- 下面是你的*ngFor循环渲染表格 -->
   <div *ngFor="let cert of formatedCerts() | keyvalue">
     <h3>系列ID: {{ cert.key }}</h3>
     <table>
       <!-- 表格内容 -->
     </table>
   </div>
   

   这里注意我用了keyvalue管道来遍历对象，Angular 6+支持这个管道，比直接用Object.keys更方便在模板里遍历对象。

方法二：模板中直接计算（快速但注意性能） #

如果你的formatedCerts()方法返回的对象不会频繁变化，也可以直接在模板里计算，但要注意每次变更检测都会调用这个方法，可能有性能损耗：

<div>共 {{ Object.keys(formatedCerts()).length }} 个系列</div>

不过这种方式需要确保Object在模板里是可访问的，有时候Angular模板默认不直接暴露全局对象，这时候你可以在组件类里把Object赋值给一个属性：

// 组件类里添加
Object = Object;

这样模板里就能正常使用Object.keys()了。

为什么之前尝试失败？ #

大概率是因为直接在模板里调用方法计算时，要么Object在模板里不可访问，要么方法返回的对象每次都是新的（比如formatedCerts()每次都返回一个新对象），导致变更检测时出现问题，或者你没找对时机去更新这个计数。

内容的提问来源于stack exchange，提问作者Jim P.