ngFor for delayed data

Question

I have a component that takes the URL param, call API and displays the data. Most basic and typically sample:

ngOnInit() {
    this.route.params.subscribe( params => { 
      const id = params.id;     
      this.loadAssets(id);
    });
  }

  loadAssets(id)
  {   
    this.apiService.getAssetGroup(id).subscribe((data) => {
      this.assetGroup  =  data;   
      this.assetSubGroupList = data.assetSubGroupList;
      console.log(this.assetGroup);
    });
  }

In my html i do a simple loop:

<div class="row">
    <div class="col-sm-12 col-lg-12">
        <div *ngFor="let subGroup of assetGroup.assetSubGroupList">
            <div>SubGroup: {{subGroup.name}}</div>
            <div *ngFor="let asset of subGroup.assetList">Asset: {{asset.name}}</div>
        </div>
    </div>
</div>

I guess this is some of to most common scenarios in web development. However, I get the following error:

Cannot read property 'assetSubGroupList' of undefined at Object.eval [as updateDirectives] (AssetsComponent.html:5)

My best guess is this is because when the page is loaded assetGroup is null. The page actually ends working after the data is loaded, but i dont want the first error. I am thinking there must be some standard way of handling this scenario in Angular. Do you always initialize variables, use ngIf or even something smarter?

*assetGroup is null*: no. As the error message says, it's undefined. ngIf is your friend. — JB Nizet, Sep 28 '18 at 06:39

score 1 · Answer 1 · answered Sep 28 '18 at 06:38

1

Add a ? operator to assetGroup

<div *ngFor="let subGroup of assetGroup?.assetSubGroupList">
            <div>SubGroup: {{subGroup.name}}</div>
            <div *ngFor="let asset of subGroup.assetList">Asset: {{asset.name}}</div>
        </div>

answered Sep 28 '18 at 06:38

Franklin Pious

3,670
3
26
30

It got me further. Now same error for the name property. Cant you add ? to that too?

SubGroup: {{subGroup?.name}}

Asset: {{asset?.name}}

– Thomas Segato Sep 28 '18 at 06:43
@ThomasSegato yes – Franklin Pious Sep 28 '18 at 07:03

score 1 · Answer 2 · answered Sep 28 '18 at 06:39

It is the reason indeed, one way, you can just use this line this.assetSubGroupList = data.assetSubGroupList; to iterate through, so <div *ngFor="let subGroup of assetSubGroupList">

Or you can do a check using the ? operator like so

<div *ngFor="let subGroup of assetGroup?.assetSubGroupList">

SiddAjmera · Accepted Answer · 2018-09-28T06:53:53.423

1

Use an async pipe instead. That way you won't have to take care of unsubcribeing as well which is generally recommended and done to avoid any memory leaks.

Just declare a property in your TS Class named assetGroup$(we ideally suffix a $ sign for a value that might be of type Observable. It's just a code convention that you can read more about here.) and then assign it in the loadAssets function like this:

assetGroup$;
...
loadAssets(id) {
  this.assetGroup$ = this.apiService.getAssetGroup(id);
}

Then in your template code use it like this:

<div class="row">
  <div class="col-sm-12 col-lg-12">
    <div *ngFor="let subGroup of (assetGroup$ | async).assetSubGroupList">
      <div>SubGroup: {{subGroup.name}}</div>
      <div *ngFor="let asset of subGroup.assetList">Asset: {{asset.name}}</div>
    </div>
  </div>
</div>

edited Sep 28 '18 at 06:53

answered Sep 28 '18 at 06:43

SiddAjmera

38,129
5
72
110

Thanks looks much more clean. How do you declare assetGroup$ ? – Thomas Segato Sep 28 '18 at 06:46
I've updated my answer. `assetGroup$;` is just a property on your TS Class. – SiddAjmera Sep 28 '18 at 06:47
I really like this method. But it moves the problem to the sub properties. I know get: property 'name' of undefined. Also I needed to define it as following: private assetGroup$: Observable;. Do you have a smart way for handling the properties too? – Thomas Segato Sep 28 '18 at 06:52
First up, it shouldn't be a private property as that is something that you're going to use in your template. So it should be public. Second thing, since the template part is going to run only after it has unwrapped the value, you shouldn't be getting the error that you just mentioned. You can have a look at a [**Sample StackBlitz here**](https://stackblitz.com/edit/angular-generic-http-get?file=src%2Fapp%2Fapp.component.html). I'm declaring a `users$` property on my class and using it in my template using `async` – SiddAjmera Sep 28 '18 at 07:00
Your right I had a
{{assetGroup.name}} another place in the html. Thanks highly appreciated!
– Thomas Segato Sep 28 '18 at 07:08

ngFor for delayed data

3 Answers3

{{assetGroup.name}} another place in the html. Thanks highly appreciated!