Angular - 重新加载页面时数据不会保留答案

【问题标题】：Angular - Data don't stay when reloading the pageAngular - 重新加载页面时数据不会保留
【发布时间】：2018-11-14 04:56:07
【问题描述】：

我对 Angular 有点陌生，有些东西我不明白。我希望你能帮助我。

我正在使用 Angular 和 Firebase 构建一个应用，其中包含一个注册页面。当我提交注册表单时，一切顺利，数据被发送到 Firebase： Data stored in Firebase

然后应用程序转到显示用户列表的页面。新用户按计划在那里。

问题是当我重新加载列表为空但数据仍在 Firebase 中时。

这是用户列表组件（显示用户的组件）的代码：

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 基础知识有误解吗？重新加载页面时丢失数据是否正常？

提前谢谢你们。

【问题讨论】：

Olivier，为了未来，隐藏你的 URL。我可以获取您所有的用户信息。 [{"email":"olivier.berton133@gmail.com","login":"admin","password":"admin"},{"email":"toto@gmail.com","login": "toto","password":"toto"}] PS：使用 angularFire2 会为你节省很多时间！ npm install -s angularfire2
感谢您的建议，至少只有电子邮件地址是真实的。
你为什么要“重新加载”页面？
如果用户这样做，看看它会做什么。
如果您想在页面刷新之间保留数据，请转到 LocalStorage 或 sessionStorage

标签： angular firebase reload

【解决方案1】：

然后应用程序会转到显示用户列表的页面。

在ngOnInit() 上的这个组件中，调用您的服务getUsersFromServer() 这样，当有人重新加载该页面时，将调用getUsersFromServer()，您将获得您的用户列表。

【讨论】：