我的 html 文件中有这样的 div 标签：

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

并且它总是返回此错误

ERROR TypeError: Cannot read property 'id' of undefined

我多次测试了我的变量并且 chat.asReceiver.id 和 user?.id 都有值，然后我将我的 div 放在 *ngIf 下，如下所示：

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

仍然存在错误。

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);
      }
    });
}

有什么想法吗？

更新

我的数据是什么样的

更新 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>