CollectionVariable.length throws error

Ionic Framework ionic-v3
1

Hi

My html file has below code

<ion-content padding>
  <ion-list>
    <button ion-item detail-push *ngFor="#resource of resources" (click)="DisplayDetails($event,resource)">
      <ion-thumbnail item-left>
        <img [src]="resource.imageUrl">
      </ion-thumbnail>      
      <h1>{{resource.name}}</h1>
      <p> <b> {{resource.skill.name}} </b> • {{resource.experience}} Years</p>
       <ion-icon name="arrow-forward" item-right></ion-icon>
    </button>      
  </ion-list>
</ion-content>
<ion-content>
   <ion-item text-wrap [hidden] = "resources.length > 0">
       <p>No resource found for selected location. Sorry for the inconvenience caused. Kindly search for other locations.</p>
    </ion-item> 
</ion-content>

Not sure why for resources.length , it throws error as below
Uncaught (in promise): EXCEPTION: TypeError: Cannot read property ‘length’ of undefined in [resources.length > 0

Please help.

2

Chance are, you’re not setting resources as an array before the request.

So you’d want to do something like

export class MyClass {}

public resources = [];

constructor(){
  // get data
}
}

So this way, you know for sure that the data structure is an array and should have the property of length.

3

Thank you for your reply.
I have set as array before calling and please notice that I am iterating in ngRepeat and it works but below line resources.length ddoesn’t work.

4

Two ion-contents? why not just one?

5

Tried with single but that did not work…and I am new to ionic and learning so…

6

What Ionic version are you using? There’s a chance your ngFor syntax is obsolete and breaking things.

7

I am using 2.0.0-beta.32

8

That’s Ionic CLI version, maximum version of Ionic is 2.0.0.beta.9