Angular + AngularFire, когда пользователь вернулся к переменным компонента представления, пустые - PullRequest
0 голосов
/ 24 апреля 2020

У меня возникла проблема. Я получил представление / контроллер панели мониторинга, где я извлекал данные из сервиса, которые ссылаются на Firebase и отображают данные. Данные извлекаются и отображаются, но как только я go переходит на другой маршрут / вид и go снова на панель мониторинга, переменные кажутся пустыми и данные не отображаются. Кажется, что переменные очищаются после того, как пользователь вернулся, и поскольку нет изменений данных в переменных подписки, они не перезаписываются значением из Firebase. Что я тут не так делаю?

Контроллер:

     @Component({
      selector: 'app-dashboard',
      templateUrl: './dashboard.component.html',
      styleUrls: ['./dashboard.component.css']
    })
    export class DashboardComponent implements OnInit {
      firstFormGroup: FormGroup;
      userData: any;
      selectedPoints: any;

      categories: Options[];
      allAddedPoints: Array<any> = [];

      constructor(
        public authService: AuthService,
        public router: Router,
        public remoteService: RemoteService,
        public ngZone: NgZone,
        public geoService: GeoService,
        private formBuilder: FormBuilder
      ) { 
      }

      ngOnInit() {

        this.remoteService.getObjectCategory().subscribe(items => {
          const categories = Object.values(items)
          this.categories = categories;
        }, (err)=>{ console.log("problem : ", err) });

        this.remoteService.getAllHelpPoints().subscribe(items => {
          for (let [key, value] of Object.entries(items)) {
            let item:any = value;
            item.id = key;
            console.log(item.status);
            if (!item.status) {
              this.allAddedPoints.push(item)
            }
          }
        }, (err)=>{ console.log("problem : ", err) });

      }
}

Сервис:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';


@Injectable({
  providedIn: 'root'
})
export class RemoteService {
  objectCategories: Observable<any>;
  objectProvince: Observable<any>;
  allHelpPoints: Observable<any>;

  constructor(public dbReal: AngularFireDatabase, public dbStore: AngularFirestore) {
    this.objectCategories = this.dbReal.object('objectCategory').valueChanges(); 
    this.allHelpPoints = this.dbReal.object('allHelpPoints').valueChanges(); 
   }

  getObjectCategory() {
    return this.objectCategories;
  }


  getAllHelpPoints() {
    return this.allHelpPoints;
  }

Просмотр:

<mat-selection-list #points (onSelection)="selectionChanged($event)">
                    <mat-list-option *ngFor="let point of allAddedPoints" [value]="point.id">
                      Nazwa: {{point.name}}
                      Kontakt: {{point.contact}}
                      Zweryfikowany: {{point.status ? 'Tak' : 'Nie'}}
                    </mat-list-option>
                  </mat-selection-list>
...