Angular TypeError：无法读取未定义的属性“ id”

Question

我的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>

Answer 1

问题是对象asReceiver的属性chat不存在。 在您提供的代码中，您没有显示chat的定义，您也可以张贴它吗？在不完全知道它是什么的情况下，您也可以尝试为聊天添加问号到ngIf上。

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

这里的问题是，如果两个id都未定义，则不仅会相等，还会进入else语句。

Answer 2

也许使用类似的东西

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

此外，我建议使用异步管道重写所有内容