Filter function in ngFor with async variable

Question

I am trying to filter an array in a ngFor. If I do below I get an error:

html:

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

error: Cannot read property 'assetGroups' of undefined.

If I do following I get another error:

html:

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

error:

TechnicalManagerReportComponent.html:66 ERROR TypeError: _co.filterGroups is not a function

So I am kind of stuck on how to do the filtering. This is my filter function:

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

    return result;
}

Notice the ngFor works perfectly without the filter function.

My init method:

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

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

And service:

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)));     
}

Can you reproduce the problem in a stackblitz? Is the method filterGroups defined in the class TechnicalManagerReportComponent? — Martin Parenteau
– Martin Parenteau, Commented Oct 23, 2018 at 18:13
I think it will be rather complex to reproduce it as I have a protected REST service. But yes the method is part of the the TechnicalManagerReportComponent. I think it is the ? that somehow dosen't work as parameter to a function. But if I don't aply that, at the binding stage the next error applies because data is not loaded before rest service has been called and there for report.assetGroups is null at startup. — Thomas Segato
– Thomas Segato, Commented Oct 23, 2018 at 18:22
Do you have an error if you do let group of filterGroups(null)? — Martin Parenteau
– Martin Parenteau, Commented Oct 23, 2018 at 18:23
That works: let group of filterGroups(null). So the question is how can you call filterGroups(report?.assetGroups) - with the? Is there another way to parse a nullable proeprty to a filter function. — Thomas Segato
– Thomas Segato, Commented Oct 23, 2018 at 18:28

Buczkowski · Accepted Answer · 2018-10-23 18:42:01Z

2

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

With provided code you assign something to report property after some request so probably initially it's undefined or null - let's add check for that.

answered Oct 23, 2018 at 18:42

Buczkowski

2,41614 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jeto Over a year ago

Why not put the *ngIf on the div itself? (edit: never mind!)

Martin Parenteau Over a year ago

@Jeto - You cannot apply two structural directives on the same element.

Buczkowski Over a year ago

@Jeto angular.io/guide/…

Jeto Over a year ago

Sorry, for some reason I never had to do that in any code of mine. This is a bit of a shame though. My bad.

Buczkowski Over a year ago

It's not a shame it's a learning process though in future maybe you would put those two structural directives together and notice error :)

|

Martin Parenteau · Accepted Answer · 2018-10-23 19:18:22Z

1

Since filterGroups handles a null parameter properly, you can test if report is defined and pass null if it isn't:

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

Please note that the original code with the safe navigation operator should also work:

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

See this stackblitz for a demo.

edited Oct 23, 2018 at 19:18

answered Oct 23, 2018 at 18:46

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Collectives™ on Stack Overflow

Filter function in ngFor with async variable

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related