繁体   English   中英

如何在模态关闭时同步Firebase数据而无需在ionic中重新加载页面?

[英]How to sync firebase data on modal dismiss without reloading the page in ionic?

我正在使用一种模式来获取将保存在Firebase中的表单值。 我正在从Firebase中检索保存的数据,并将其显示在页面中。 但是当我关闭表单提交中的模式时,我的价值没有得到更新。 看起来我每次退出模态时都必须重新加载构造函数。 有没有更好的方法来更新数据而无需在模式onWillDismiss上重新加载构造函数?

我的首页组件

    export class HomePage {
      items: any = []
      roomData:any;
      constructor(public navCtrl: NavController,public modal:ModalController,public navParams:NavParams,public auth:AuthProvider,public af:AngularFireModule) {
        this.roomData=auth.getRoomData();
        console.log('Rooms data from firebase',this.roomData)
        this.items.push(this.roomData)
        console.log(this.items);
      }
      addItem(){
        var modal = this.modal.create(AddRoomModalPage);
        modal.present();
        // modal.onWillDismiss(function(success,err){
        //   if(err){
        //     return console.log('thsk');      
        //   }else{

        //   }
        // })
      }

    }

我的情态成分

export class AddRoomModalPage {
   public roomDetails:FormGroup;
  constructor(public navCtrl: NavController, public auth:AuthProvider,public navParams: NavParams,public formBuilder: FormBuilder,public viewCtrl:ViewController) {
    this.roomDetails = formBuilder.group({
    roomName: ['', Validators.required],
    idealFor:['',Validators.required],
    roomMates: ['', Validators.required],
    location: ['', Validators.required],
      reqID:[false,Validators.required]
}); 
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AddRoomModalPage');
  }

  addRoom(){
    if(this.roomDetails.valid){
      console.log(this.roomDetails.value);
      this.auth.addNewRoom(this.roomDetails.value);
      this.viewCtrl.dismiss();
    }else{
      console.log("form invalid")
    }

  }

  closeModal(){
    this.viewCtrl.dismiss();
  }

任何帮助将非常感激。 提前致谢!

您可以使用ModalController的onDismiss()方法。 简单例如:

let modal = Modal.create(myModal, { data: [...] });

// Getting data from the modal:
modal.onDismiss(data => {
    // Update your props here
    console.log('MODAL DATA', data);
});

this.nav.present(modal);

也许你可以使用ionViewWillLeave()在你的模式,或使用ionViewWillEnter()在您的HomePage以获取此事件。

请参阅此处的官方文档。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM