Question

我正在尝试过滤ngFor中的数组。如果我在下面进行操作，则会收到错误消息：

html：

<div *ngFor="let group of filterGroups(report.assetGroups)">

错误：无法读取未定义的属性“ assetGroups”。

如果我遵循以下说明，则会出现另一个错误：

html：

<div *ngFor="let group of filterGroups(report?.assetGroups)">

错误：

TechnicalManagerReportComponent.html：66错误TypeError：_co.filterGroups不是函数

因此，我对如何进行过滤有些困惑。这是我的过滤器功能：

filterGroups(itemList: AssetGroup[]): AssetGroup[] {
    let result: AssetGroup[] = [];

    return result;
}

请注意，如果没有过滤器功能，ngFor可以完美运行。

我的初始化方法：

ngOnInit() {
  this.route.params.subscribe( params => {      
    this.reportId = params.reportId;  

    this.apiService.getReportComplete(this.reportId).subscribe((data) => {    
      this.report = data;
      this.loadGraph(this.report);
    });
  });
}

服务：

getReportComplete(reportId:string):Observable<ReportComplete>{    
  var url = `https://xxx.azurewebsites.net/api/reportcomplete/${reportId}`;
  return  this.httpClient.get<ReportComplete>(url).pipe(
    map(x => new ReportComplete(x)));     
}

Answer 1

<ng-container *ngIf="report">
    <div *ngFor="let group of filterGroups(report.assetGroups)">{{group}}</div>
</ng-container>

使用提供的代码，您可以在某些请求后为report属性分配一些内容，因此最初可能是undefined或null-让我们添加对它的检查。

Answer 2

由于filterGroups正确处理了null参数，因此您可以测试是否定义了report，如果未定义则传递null

*ngFor="let group of filterGroups(report ? report.assetGroups : null)"

请注意，带有安全导航操作符的原始代码也应起作用：

*ngFor="let group of filterGroups(report?.assetGroups)"

有关演示，请参见this stackblitz。

ngFor中带有异步变量的过滤器功能

2 个答案: