Angular:to check array length if 0

Question

I have a simple requirement ie if favorites array is empty hide the EDIT button.

Code i wrote on HTML:

    <span class="edit-button" *ngIf="favourites.length == 0">EDIT</span>

But I am getting an error on console Unable to get property 'length' of undefined.

I also tried *ngIf="favourites?.length == 0" still m getting the same error.

Where did I go wrong?

Answer 1

Please check the initialization of property favourites in your component class.

Looks like the property is defined with no initialization, add the default value to it.

like below

 public favourites: Array<any> = [];

Hope this helps

Answer 2

First you are checking if favourites.length === 0 but your requirement says you need to hide if empty then it should be favourites.length != 0 because *ngIf shows if its true.

You can check favourites first and then favourites.length which means it will first check for favourites initialization and if there is any data.

<span class="edit-button" *ngIf="favourites && favourites.length">EDIT</span>

Demo: https://stackblitz.com/edit/angular-xuzpx7

Answer 3

以角度检查长度

<div class="box stack-top" *ngIf="profile.id.length == 8"></div>