我对角度有点新意,有些东西我不明白。我希望你能帮助我。
我正在使用Angular和Firebase构建一个包含注册页面的应用。 当我提交注册表单时,一切顺利,数据将发送到Firebase: Data stored in Firebase
然后该应用程序转到显示用户列表的页面。新用户就像计划一样。
问题是我重新加载列表时是空的,但数据仍在Firebase中。
以下是userlist组件(显示用户的组件)的代码:
export class UserListComponent implements OnInit, OnDestroy {
users: User[];
userSubscription: Subscription;
constructor(private userService: UserService) { }
ngOnInit() {
this.userSubscription = this.userService.userSubject.subscribe(
(users: User[]) => {
this.users = users;
}
);
this.userService.emitUsers();
}
ngOnDestroy() {
this.userSubscription.unsubscribe();
}
}
以下是userService的代码(从Firebase获取数据的代码):
@Injectable()
export class UserService {
private users: User[] = [
new User('admin', 'admin', 'email@gmail.com')
];
userSubject = new Subject<User[]>();
emitUsers() {
this.userSubject.next(this.users.slice());
}
addUser(user: User) {
this.users.push(user);
this.emitUsers();
}
saveUsersToServer() {
this.httpClient
.put('https://TEST.firebaseio.com/users.json', this.users)
.subscribe(
() => {
console.log('Enregistrement terminé !');
},
(error) => {
console.log('Erreur : ' + error);
}
);
}
getUsersFromServer() {
this.httpClient
.get<any[]>('https://TEST.firebaseio.com/users.json')
.subscribe(
(response) => {
this.users = response;
this.emitUsers();
},
(error) => {
console.log('Erreur ! : ' + error);
}
);
}
constructor(private httpClient: HttpClient) { }
}
我没有显示导入,因为它没有错误。
我误解了Angular的基本原理吗? 重新加载页面时松散数据是否正常?
先谢谢你们。
答案 0 :(得分:0)
然后该应用程序转到显示用户列表的页面。
在ngOnInit()
上的此组件中调用您的服务getUsersFromServer()
这样当有人重新加载该页面时,系统会调用getUsersFromServer()
,您将获得用户列表。