时间戳

首页 > 解决方案 > Angular 11 - 无法读取未定义的属性“示例”

javascript - Angular 11 - 无法读取未定义的属性“示例”

问题描述

我收到的错误消息是无法读取未定义的“channel_sid”的属性，但我不太确定需要在哪里定义它。

零件

export class ChatroomDetailComponent implements OnInit {

  private _ngDestroy$ = new Subject();
  chatroomLoaded: Promise<boolean>;
  filteredChatroom: Array<ChatroomArray> = [];
  chatroom: ChatroomArray;
  user: CurrentUser;
  returnUrl: string;
  id: string;

  constructor(
    private authService: AuthenticationService,
    private messageService: ChatroomService,
    private router: Router,) {
    this.user = this.authService.currentUserValue;
  }
  ngOnInit() {
    this.loadChatroom(true);
  }
  // GET chatroom object by channel_sid
  loadChatroom(shouldAnimate?: boolean) {
    this.id = this.chatroom.channel_sid;
    this.messageService.detailedResp('getchathistory?', this.id).pipe(takeUntil(this._ngDestroy$)).subscribe((response) => {
      this.filteredChatroom = response;
    });
    if (shouldAnimate) {
      this.chatroomLoaded = Promise.resolve(true);
    }
  }

HTML

<!-- Title Card-->
<section class="title-card">
  <div class="flex-container" fxLayout="row">
    <div class="pform-title-box">
      <button
        class="navigateButton expand-section"
        (click)="backToChatrooms(chatroom)"
      >
        <mat-icon class="pform-icons" style="color: #666; float: left">
          chevron_left
        </mat-icon>
      </button>
      <h1 class="pform-block-title">name</h1>
    </div>
  </div>
</section>

<!-- Chat Box-->
<div class="message-box">
  <div class="text-area">
    <p class="left-align-text">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam natus.
    </p>
    <p class="right-align-text">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam natus.
    </p>
    <p class="left-align-text">Lorem ipsum dolor!</p>
    <p class="right-align-text">Lorem ipsum dolor sit amet consectetur!</p>
  </div>
  <form class="message-form" (keyup.enter)="submitMessage()">
    <input class="message-input" type="text" placeholder="Your message" />
  </form>
</div>

这是我经常遇到的错误，这意味着我不了解将来要避免的事情。这个问题有什么明确的吗？

感谢您抽出宝贵时间进行审核！

标签： javascripthtmlangulartypescriptangular-directive

解决方案

您的聊天室对象为空。

在使用它的值之前，您应该将数据添加到对象中。

 loadChatroom(shouldAnimate?: boolean) {
    this.id = this.chatroom.channel_sid;

推荐阅读