Angular - данные не сохраняются при перезагрузке страницы - PullRequest
0 голосов
/ 04 июня 2018

Я немного новичок в angular, и есть кое-что, чего я не понимаю.Я надеюсь, что вы сможете мне помочь.

Я создаю приложение с Angular и Firebase, которое включает страницу регистрации.Когда я отправляю форму регистрации, все идет хорошо, и данные отправляются в Firebase: Данные сохраняются в 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?Нормально ли терять данные при перезагрузке страницы?

Заранее спасибо, ребята.

1 Ответ

0 голосов
/ 05 июня 2018

И затем приложение переходит на страницу, на которой отображается список пользователей.

В этом компоненте на ngOnInit() вызывайте свои услуги getUsersFromServer() Таким образом, когда кто-либо перезагружает эту страницу, getUsersFromServer() будет вызван, и вы получите свой список пользователей.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...