Cannot read property 'healthCarePlans' of undefined (angular5)

Question

Ive looked at other anwsers to this question but havent found a solution

I'm getting the error in the title and while its not affecting the app i still would rather not have it.

<div *ngIf="currentUserData.healthCarePlans.length > 0">
    <p-carousel numVisible="3"
                [value]="currentUserData.healthCarePlans">
                    <ng-template let-insurance pTemplate="insurance">
                        <div>
                            <img class="company-header-avatar hc-img"
                                 [src]="insurance.imagePath">
                                      <div class="ui-g-12 hc-info">
                                          <div class="ui-g-6">

                          {{insurance.healthCareCompany.person.companyName}}
                                          </div>
                                          <div class="ui-g-6">
                                              {{insurance.code}}
                                          </div>
                                      </div>
                        </div>
                    </ng-template>
    </p-carousel>
</div>

I have tried the safe operator as usually that works but it doesnt seem to in this case

your ngIf is async. should probably be currentUserData?.healthCarePlans.length — Stavm
when you're using currentUserData.healthCarePlans.length something like this for async calls you to need to map it to model and so that currentUserData.healthCarePlans is assigned to empty array — Abhishek Ekaanth

Sajeetharan Sajeetharan · Accepted Answer · 2018-11-16T16:54:04

This could be because currentUserData is null , you can handle with

<div *ngIf="currentUserData && currentUserData.healthCarePlans.length > 0">

Cannot read property 'healthCarePlans' of undefined (angular5)

2 Answers