javascript - 离开页面时 ngFor 循环内容消失

Question

我是 Angular 和 Ionic 的新手。我正在循环访问存储在我的 Firestore 数据库中的一系列内容。当应用程序重新编译和加载时，然后我转到设置页面(这是循环发生的地方)，我看到内容数组很好。我可以在 Firestore 上更新它，它会在应用程序中实时更新。这里一切都很好。但是如果我点击“返回”(因为正在使用“navPush”访问设置)，然后再次点击设置页面，整个循环内容就会消失。

东西还在数据库里就好了。我必须重新编译项目才能使内容再次出现。但是再一次，当我离开那个设置页面并返回时，内容就会消失。

这是我的代码:

HTML 设置页面(循环的主要代码):

<ion-list>
    <ion-item *ngFor="let setting of settings">
        <ion-icon item-start color="light-grey" name="archive"></ion-icon>
        <ion-label>{{ setting.name }}</ion-label>
      <ion-toggle (ionChange)="onToggle($event, setting)" [checked]="setting.state"></ion-toggle>
    </ion-item>
</ion-list>

设置页面TS文件:

import { Settings } from './../../../models/settings';
import { DashboardSettingsService } from './../../../services/settings';
import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-dashboard-settings',
  templateUrl: 'dashboard-settings.html',
})
export class DashboardSettingsPage implements OnInit {


  settings: Settings[];
  checkStateToggle: boolean;
  checkedSetting: Settings;

  constructor(public dashboardSettingsService: DashboardSettingsService) {
    this.dashboardSettingsService.getSettings().subscribe(setting => {
      this.settings = setting;
      console.log(setting.state);
    })
  }

  onToggle(event, setting: Settings) {
    this.dashboardSettingsService.setBackground(setting);
  }

}

还有我的设置服务文件(DashboardSettingsService 导入):

import { Settings } from './../models/settings';
import { Injectable, OnInit } from '@angular/core';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';

@Injectable()

export class DashboardSettingsService implements OnInit {

  settings: Observable<Settings[]>;
  settingsCollection: AngularFirestoreCollection<Settings>;
  settingDoc: AngularFirestoreDocument<Settings>;

    public checkedSetting = false;

  setBackground(setting: Settings) {
    if (this.checkedSetting == true) {
      this.checkedSetting = false;
    } else if(this.checkedSetting == false) {
      this.checkedSetting = true;
    };
    this.settingDoc = this.afs.doc(`settings/${setting.id}`);
    this.settingDoc.update({state: this.checkedSetting});
    console.log(setting);
  }

  constructor(private afAuth: AngularFireAuth,private afs: AngularFirestore) {
    this.settingsCollection = this.afs.collection('settings');
    this.settings = this.settingsCollection.snapshotChanges().map(changes => {
      return changes.map(a => {
        const data = a.payload.doc.data() as Settings;
        data.id = a.payload.doc.id;
        return data;
      });
  });

}
isChecked() {
  return this.checkedSetting;
}

    getSettings() {
      return this.settings;
    }

    updateSetting(setting: Settings) {
      this.settingDoc = this.afs.doc(`settings/${setting.id}`);
      this.settingDoc.update({ state: checkedSetting });
    }

}

知道是什么原因造成的吗？我的loop之前是在自定义组件里面的，所以我试着直接放到Dashboard Settings Page里面，还是不行。我不知道要在这里检查什么。我试着把 :

this.dashboardSettingsService.getSettings().subscribe(setting => {
  this.settings = setting;
})

...改为使用 ngOninit 方法，甚至是 ionViewWillLoad 和其他方法，但它也不起作用。

我正在使用 Ionic 最新版本 (3+) 和 Angular (5) 相同

谢谢!

Answer 1

从您发布的代码中，我观察到两个可能是导致该问题的潜在原因的发现，

1. 在构造函数中调用 Service 方法:

当您的设置组件被创建时，该构造函数将被调用，但是如果您依赖于子组件的属性或数据来进行操作，例如导航到设置页面，那么将您的构造函数移至任何生命周期 Hook .

  ngAfterContentInit() {
    // Component content has been initialized
  }
  ngAfterContentChecked() {
    // Component content has been Checked
  }
  ngAfterViewInit() {
    // Component views are initialized
  }
  ngAfterViewChecked() {
    // Component views have been checked
  }

即使您在生命周期事件中添加了您的服务调用方法，但它只会被调用一次，因为您在设置服务文件的构造函数中订阅了您的服务方法。所以只需尝试按如下方式更改您的服务文件:

getSettings() {
     this.settingsCollection = this.afs.collection('settings');
     this.settingsCollection.snapshotChanges().map(changes => {
      return changes.map(a => {
        const data = a.payload.doc.data() as Settings;
        data.id = a.payload.doc.id;
        return data;
      });
  });


    }

更新:

尝试如下更改 Getsettings，请使用最新更改更新您的问题

getSettings() {


   this.settingsCollection = this.afs.collection('settings');
 return this.settingsCollection.snapshotChanges().map(changes => {
      return changes.map(a => {
        const data = a.payload.doc.data() as Settings;
        data.id = a.payload.doc.id;
        return data;
      });
  });


    }