在 Angular 中订阅错误答案

【问题标题】：Error with Subscribe in Angular在 Angular 中订阅错误
【发布时间】：2018-06-10 09:28:23
【问题描述】：

我正在尝试解决此问题，因为我无法登录我的应用程序。我正在关注一个 youtube 教程，因为我是 Angular 的新手。这是所有者的github和他的项目-> https://github.com/wesdoyle/base-chat/blob/master/src/app/services/chat.service.ts

它给了我以下错误：

chat.service.ts的代码：

import { Injectable } from '@angular/core';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
import { Observable } from 'rxjs/Observable';
import { AuthService } from '../services/auth.service';
import * as firebase from 'firebase/app';

import { ChatMessage } from '../models/chat-message.model';

@Injectable()
export class ChatService {
  user: firebase.User;
  chatMessages: FirebaseListObservable<ChatMessage[]>;
  chatMessage: ChatMessage;
  userName: Observable<string>;

  constructor(
    private db: AngularFireDatabase,
    private afAuth: AngularFireAuth
    ) {
        this.afAuth.authState.subscribe(auth => {
          if (auth !== undefined && auth !== null) {
            this.user = auth;
          }

          this.getUser().subscribe(a => {
            this.userName = a.displayName;
          });
        });
    }

  getUser() {
    const userId = this.user.uid;
    const path = `/users/${userId}`;
    return this.db.object(path);
  }

  getUsers() {
    const path = '/users';
    return this.db.list(path);
  }

  sendMessage(msg: string) {
    const timestamp = this.getTimeStamp();
    const email = this.user.email;
    this.chatMessages = this.getMessages();
    this.chatMessages.push({
      message: msg,
      timeSent: timestamp,
      userName: this.userName,
      email: email });
  }

  getMessages(): FirebaseListObservable<ChatMessage[]> {
    // query to create our message feed binding
    return this.db.list('messages', {
      query: {
        limitToLast: 25,
        orderByKey: true
      }
    });
  }

  getTimeStamp() {
    const now = new Date();
    const date = now.getUTCFullYear() + '/' +
                 (now.getUTCMonth() + 1) + '/' +
                 now.getUTCDate();
    const time = now.getUTCHours() + ':' +
                 now.getUTCMinutes() + ':' +
                 now.getUTCSeconds();

    return (date + ' ' + time);
  }
}

user-list.components.ts ->

import { Component, OnInit } from '@angular/core';
import { User } from '../models/user.model';
import { ChatService } from '../services/chat.service';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.css']
})
export class UserListComponent {
  users: User[];

  constructor(chat: ChatService) {
    chat.getUsers().subscribe(users => {
      this.users = users;
    });
  }
}

【问题讨论】：

把你的 UserList 组件也显示给我，这是错误发生的地方。
@GabrielBitencourt 完成。

标签： javascript angular subscribe

【解决方案1】：

你应该使用 this.chat 而不是仅仅在构造函数中聊天

constructor(chat: ChatService) {
    this.chat.getUsers().subscribe(users => {
      this.users = users;
    });
  }

【讨论】：

我添加了 valuechanges();这似乎是固定的，但只在一个文件中。
你还没有回答我的问题！什么是错误
抱歉，它会生成一个新错误 -> 类型“AngularFireObject”上不存在属性“订阅”。在 chat.service.ts.
那么我应该离开 valuechanges() 吗？
return this.db.object(path); 正在返回 AngularFireObject，而不是 Observable，所以是的。此外，您应该为您的函数定义返回类型，例如getUser(): AngularFireObject<User> {，以便您的 IDE 可以及早发现任何错误。（您需要在顶部导入User）

【解决方案2】：

您是否在 app.module.ts 文件中导入 ChatService 并将其添加到 providers？

import { ChatService } from './services/chat.service';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
    ...
    ChatService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果是这样，请尝试在构造函数中在 chat 之前添加 private。

constructor(private chat: ChatService) {
  chat.getUsers().subscribe(users => {
    this.users = users;
  });
}

【讨论】：