Angular 6 BehaviorSubject 'undefined': Error: TypeError: Cannot read property of my declared BehaviorSubject

Question

我是 Angular（以及 Whosebug）的新手，我一直在尝试使用 Spring Boot 作为我的后端和 WebSockets 来制作一个小项目，以尝试制作一个小型实时 Web 应用程序（所有这些技术对我来说都是相当新的，我很想学习它们！）。我遇到的问题是 BehaviorSubjects 的使用。我打算在每次通过 WebSocket 从 Spring Boot 收到消息时使用我的 BehaviorSubject ('messageSubject$')。基本上，一旦我收到一条消息，我就会使用 'next()' 方法让我的 BehaviorSubject 获取它，然后让我的一个组件订阅它（对我的网络套接字的订阅和我的 BehaviorSubject 的定义都在一项服务）。但是，当我这样做时，我在 Google Chrome 的控制台上收到错误消息：“错误：TypeError：无法读取未定义的属性 'messageSubject$'”。我很困惑为什么会弹出这样的错误，因为我确实确保正确定义了它（我看过多个教程，它们似乎都以相同的方式进行）。

这是我从 rxjs 导入 BehaviorSubject 的方式：

import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';

这是 BehaviorSubject 定义（在构造函数之上）：

private messageSubject$ = new BehaviorSubject<string>('default message');

这是对我的 WebSocket 的订阅以及我尝试使用我的行为主题的地方：

    // Connecting to WebSocket found in Spring Boot MS. Also checkout polyfill.ts
  connect(user: string, password: string) {
    console.log('Inside Connect. Guest and Password: ' + user + ' ' + password);
    const socket = new SockJs('http://localhost:8080/football-ws');
    this.stompClient = Stomp.over(socket);
    this.stompClient.connect(user, password, this.onConnected);
    console.log('Attempting to connect!');
  }

  onConnected = (frame: any) => {
    console.log('Frame: ' + frame);
    this.stompClient.subscribe('/topic/public', this.onMessageReceived);
  }


  onMessageReceived(message: any) {
    console.log('Message Received from MS: '  +  message);
    try {
      this.messageSubject$.next(message.body);
    } catch (e) {
      console.log('Error: ' + e);
    }
  }

  getMessageSubject() {
    return this.messageSubject$.asObservable();
  }

如果之前有人问过这样的问题，我深表歉意，我在这里对我的问题进行了很多研究，但是 none 解决方案建议的更改似乎有效。非常感谢大家的帮助，如果需要更多代码片段或信息，我很乐意为您提供！

Answer 1

问题是由于 "this" 的范围在您的回调中不同所致。 JavaScript 有一个 "this" 的概念，这与大多数其他语言不同，但是打字稿（和现代 Javascript）有另一种语法来解决这个问题，给你一个更直观的行为 "this".

this.stompClient.connect(user, password, (frame: any) => this.onConnected(frame));

..和...

this.stompClient.subscribe('/topic/public', (message: any) => this.onMessageReceived(message));

此语法可确保 "this" 的值与您在执行回调时所期望的值一致。

您也可以使用此语法将回调内联，例如：

this.stompClient.connect(user, password, (frame: any) => {
    console.log('Frame: ' + frame);
    this.stompClient.subscribe('/topic/public', (message: any) => {
        console.log('Message Received from MS: '  +  message);
        try {
            this.messageSubject$.next(message.body);
        } catch (e) {
            console.log('Error: ' + e);
        }
    });
});

Angular 6 BehaviorSubject 'undefined': Error: TypeError: Cannot read property of my declared BehaviorSubject

Angular 6 BehaviorSubject 'undefined': Error: TypeError: Cannot read property of my declared BehaviorSubject

angular

rxjs

spring-websocket

behaviorsubject