调用API获取表格数据后展示数据条数的问题与解决方案

先帮你揪出当前代码的问题：你在子组件HTML里用*ngFor='let data of datas'循环每一条数据，然后重复渲染datas.length——这会导致每有一条数据就显示一次条数，比如你有2条数据，就会输出两次2，完全不是你想要的单条总数效果。

修正后的子组件代码 #

Children component.html

直接去掉循环，判断数据存在后显示长度即可：

<mat-icon *ngIf="data">{{data.length}}</mat-icon>

进阶优化（Angular最佳实践）

手动订阅Observable容易遗漏取消订阅，建议用async管道自动管理订阅，这样组件代码可以更简洁：

import { Component, Input } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html'
})
export class CounterComponent {
  @Input() counterDatasObservable: Observable<any[]>;
}

对应的HTML改成：

<mat-icon *ngIf="counterDatasObservable | async as data">{{data.length}}</mat-icon>

这样连组件里的data变量和ngOnInit的订阅逻辑都可以删掉，既安全又省心。

父组件调用确认 #

你的父组件代码是没问题的：

<app-counter [counterDatasObservable]="dataMlsService.getProducts('EnCours', 'Location')"></app-counter>

只要dataMlsService.getProducts返回的是Observable<any[]>类型，就能正确获取到数组的length属性，显示你要的数据条数。

当API返回你console里的2条数据时，修正后的代码就会在mat-icon里准确显示2啦。

内容的提问来源于stack exchange，提问作者HCP