在 Angular 中订阅时出错
Error with Subscribe in Angular
我正在尝试解决这个问题,因为我无法登录我的应用程序。
我正在关注一个 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);
}
}
用户-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;
});
}
}
你应该使用this.chat
而不是仅仅在构造函数中聊天
constructor(chat: ChatService) {
this.chat.getUsers().subscribe(users => {
this.users = users;
});
}
您是否在 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;
});
}
我正在尝试解决这个问题,因为我无法登录我的应用程序。 我正在关注一个 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);
}
}
用户-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;
});
}
}
你应该使用this.chat
而不是仅仅在构造函数中聊天
constructor(chat: ChatService) {
this.chat.getUsers().subscribe(users => {
this.users = users;
});
}
您是否在 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;
});
}