I am facing an issue with a div tag in my HTML file. The code snippet looks like this:
<div *ngIf="chat.asReceiver.id != user?.id; else otherParty">
Unfortunately, it always returns the following error:
ERROR TypeError: Cannot read property 'id' of undefined
After confirming that both chat.asReceiver.id and user?.id have values, I tried nesting my div under another *ngIf condition like so:
<div *ngIf="user">
<div *ngIf="chat.asReceiver.id != user?.id; else otherParty">
//....
</div>
</div>
However, the error persists.
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 suggestions on how to resolve this issue?
Update
This is how my data looks:
https://i.sstatic.net/BevnO.png
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>