Javascript 离开页面时，ngFor循环内容消失

我不熟悉棱角分明的和离子型的。我在Firestore数据库中存储的内容数组中循环。当应用程序重新编译和加载后，我转到设置页面（循环发生的地方），我可以看到内容的数组。我可以在Firestore上更新它，它将在应用程序中实时更新。这里一切都很好。但是如果我单击“后退”（因为正在使用“navPush”访问设置），然后再次单击设置页面，整个循环内容将消失

数据库里的东西还不错。我必须重新编译项目，使内容再次出现。但再一次，一旦我离开设置页面，回来，内容就会消失

这是我的密码：

HTML设置页面（循环的主代码）：

和我的设置服务文件（仪表板设置服务导入）：

…改为使用ngOninit方法，甚至ionViewWillLoad等，但它也不起作用

我使用的是爱奥尼亚最新版本（3+）和Angular（5）的版本

---

谢谢大家!

我不确定，但我怀疑订阅设置observable

settings:observable

可能是原因。这可能在第一次加载时起作用，因为正在创建和注入

仪表板设置服务，因此加载设置，然后发出一个项目（导致
仪表板设置页面中的订阅事件触发）

在第二个页面加载时，
仪表板设置服务
已经存在（默认情况下，服务创建为单例）-这意味着构造函数不会被调用（这是设置可观察对象的地方），因此它不会为组件发出新的设置对象

由于Observable不发射任何东西，因此不会触发以下事件，这意味着永远不会填充本地设置对象：


此.dashboardSettingsService.getSettings（）.subscribe（设置=>{
this.settings=设置；
console.log（设置.state）；
})

您可以使用提供最新（缓存的）设置对象或新的可观察对象（别忘了取消订阅！！）的方法重构服务，而不是创建一个只能通过创建或更改基础存储对象触发的可观察对象

这里有一个简单的例子，它不会改变你的方法签名

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';
import 'rxjs/add/observable/of';

@Injectable()

export class DashboardSettingsService implements OnInit {

  settings: Observable<Settings[]>;
  cachedSettings: 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;
          this.cachedSettings = data;
          return data;
        });
     }); 
   }

  isChecked() {
    return this.checkedSetting;
  }

  getSettings() {
    return Observable.of(this.cachedSettings);
  }

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

从“/../models/Settings”导入{Settings}；
从“@angular/core”导入{Injectable，OnInit}；
从“firebase/app”导入*作为firebase；
从'angularfire2/auth'导入{AngularFireAuth}；
从“angularfire2/firestore”导入{AngularFirestore、AngularFirestoreCollection、AngularFirestoreDocument}；
从“rxjs/Observable”导入{Observable}；
导入“rxjs/add/observable/of”；
@可注射（）
导出类仪表板设置服务在NIT上实现{
设置：可观察；
缓存设置：设置[]；
设置集合：AngularFirestoreCollection；
设置文档：AngularFirestoreDocument；
public-checkedSetting=false；
收进地面（设置：设置）{
if（this.checkedSetting==true）{
this.checkedSetting=false；
}else if（this.checkedSetting==false）{
this.checkedSetting=true；
};
this.settingDoc=this.afs.doc（`settings/${setting.id}`）；
this.setingdoc.update（{state:this.checkedSetting}）；
控制台日志（设置）；
}
构造函数（专用afAuth:AngularFireAuth，专用afs:AngularFirestore）{
this.settingscolection=this.afs.collection（'settings'）；
this.settings=this.settingsCollection.snapshotChanges（）.map（更改=>{
返回changes.map（a=>{
const data=a.payload.doc.data（）作为设置；
data.id=a.payload.doc.id；
this.cachedSettings=数据；
返回数据；
});
}); 
}
isChecked（）{
返回此.checkedSetting；
}
getSettings（）{
可观察的返回（此缓存设置）；
}
更新设置（设置：设置）{
this.settingDoc=this.afs.doc（`settings/${setting.id}`）；
this.setingdoc.update（{state:checkedSetting}）；
}     
}
从您发布的代码中，我观察到两个可能是问题的潜在原因的发现

在构造函数中调用服务方法：
创建设置组件时，将调用该构造函数，但如果依赖子组件的属性或数据，则会执行类似导航到设置页面的操作，因此请将构造函数移动到任何生命周期挂钩

  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;
      });
  });


    }

如果你能把它放在一个生命周期方法中，比如OinViewDiLoad或IonViewDiCenter之类的，那就更好了。我也试过了，但我不能让它正常工作。有什么想法吗？那它只发生一次吗？或者在第一次推送之后的任何次数？我的意思是那里有一个切换事件，当应用程序在编译后第一次加载时，我没有了解你在用它做什么，我单击设置页面，我被推送到那里，我将在ngFor部分正确地看到数据库中的数据。但是如果我点击“返回”链接，然后返回页面，它就不会再出现了。直到我重新编译应用程序才会出现。谢谢谢谢你的信息！我尝试过，如果我直接在Firestore数据库中更新内容，当循环为空时，内容将重新出现。正如您所说，似乎只有在更新数据库时才会填充对象。你能告诉我应该用什么代码来实现你说的吗？
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';
import 'rxjs/add/observable/of';

@Injectable()

export class DashboardSettingsService implements OnInit {

  settings: Observable<Settings[]>;
  cachedSettings: 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;
          this.cachedSettings = data;
          return data;
        });
     }); 
   }

  isChecked() {
    return this.checkedSetting;
  }

  getSettings() {
    return Observable.of(this.cachedSettings);
  }

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

  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() {


   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;
      });
  });


    }