Angular TypeError: Cannot read property 'id' of undefined

Question

I have such div tag in my html file:

<div *ngIf="chat.asReceiver.id != user?.id; else otherParty">

and it always return this error

ERROR TypeError: Cannot read property 'id' of undefined

I have multiple times tested my variables and both chat.asReceiver.id and user?.id have values, then I put my div under *ngIf like:

<div *ngIf="user"> <div *ngIf="chat.asReceiver.id != user?.id; else otherParty"> //.... </div> </div>

Still error exist.

component

public user: User; chats: any[] = []; constructor( ) { this.getChats(); } ionViewWillEnter() { this.authService.user().subscribe( user => { this.user = user; } ); } getChats() { this.privateChatService.getChats().subscribe((res) => { for (const chat of res.data) { this.chats.push(chat); } }); }

Any idea?

Update

how my data look like

Update 2

<div *ngIf="chats.length>0"> <ion-item-sliding *ngFor="let chat of chats; index as indexOfelement;"> <div *ngIf="chat.asReceiver.id != user?.id; else otherParty"> <ion-item class="chat-groups"> <ion-avatar slot="start"> <div *ngIf="chat.asReceiver.photo != null; else placeholderImage"> <img (click)="openImageRes(chat)" class="gImage" routerDirection="forward" [src]="chat.asReceiver.photo"> </div> <ng-template #placeholderImage> <img routerDirection="forward" class="gImage" src="../../assets/placeholders/avatar.jpg"> </ng-template> </ion-avatar> <ion-label routerDirection="forward" [routerLink]="['/tabs/', 'chat', chat.id]"> <h2 style="float: left;width: 80%;"slot="start" [innerHTML]="chat.asReceiver.username"></h2> <ion-badge slot="end" color="primary">{{totalBadges}}</ion-badge> </ion-label> </ion-item> </div> </ion-item-sliding> </div>

Felix Lemke · Accepted Answer · 2020-06-30 09:22:34Z

1

The problem is that the property asReceiver of the object chat does not exist. In your provided code you do not show the definition of chat, can you please post it, too? Without exactly knowing what it is, you can try to add the question marks to the ngIf also for the chat.

<div *ngIf="chat?.asReceiver?.id !== user?.id; else otherParty">

The problem here is that you also go into the else statement if both ids are undefined, not only if they are equal.

answered Jun 30, 2020 at 9:22

Felix Lemke

6,4863 gold badges46 silver badges69 bronze badges

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

6 Comments

mafortis Over a year ago

exactly, logic is if receiver id == logged user id show A else show B

Felix Lemke Over a year ago

Thanks! And how exactly do you get chat from your code snippet?

mafortis Over a year ago

<ion-item-sliding *ngFor="let chat of chats; index as indexOfelement;"> // here is my loop in question </ion-item-sliding>

Felix Lemke Over a year ago

I see, so chat is defined in every case, otherwise there wouldn't be the loop. Some of the chats seem not to have an existing asReceiver property. Can you check that please? Does the error appear with the questionmarks (I do not mean unexpected behavior, just the error)?

mafortis Over a year ago

currently building new app with your solution to see if it works, will keep you posted when it's done

|

Yura Rudnychenko · Accepted Answer · 2020-06-30 09:38:59Z

Maybe use something like

<div *ngIf="(chat && chat.asReceiver && user) && (chat.asReceiver.id !== user?.id); else otherParty">

Also, I would suggest rewriting everything using async pipes

Collectives™ on Stack Overflow

Angular TypeError: Cannot read property 'id' of undefined

Update

Update 2

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

Update

Update 2

2 Answers 2

6 Comments

Comments

Related