Verwenden von Observablen zum Aktualisieren angezeigter Daten auf Einfügen

Question

Ich habe mich entschieden, hier zu fragen Ich habe den ganzen Tag auf google nach einer Antwort gesucht, aber ich kann nicht verstehen, wie man es implementiert. Also im Grunde, was ich tun möchte, ist jedes Mal, wenn ich Daten aus einem Modal einfügen, sobald es sich schließt, würde es die Liste seiner Elternansicht automatisch aktualisieren. In der Vergangenheit würde ich dies tun, indem ich eine Timeout-Funktion auf der Suche nach Observables stolperte. Was ich jetzt wissen möchte, ist, wie ich das in meinem aktuellen Setup umsetzen kann.

Hier ist meine component.ts

import { Component } from '@angular/core'; 
import { NavController, NavParams, ModalController,FabContainer } from 'ionic-angular'; 
import { ModalCreateNewDirectoryPage } from '../../pages/modal-create-new-directory/modal-create-new-directory'; 
import {PopupUploadCsvPage} from '../../pages/popup-upload-csv/popup-upload-csv'; 
import { BeaconRestApiProvider } from '../../providers/beacon-rest-api/beacon-rest-api'; 
import {ModalShowPhonebookDirectoryPage} from '../../pages/modal-show-phonebook-directory/modal-show-phonebook-directory'; 
import { Observable } from 'rxjs/Observable'; 
import { AsyncPipe } from '@angular/common'; 

/** 
* Generated class for the PhonebookPage page. 
* 
* See http://ionicframework.com/docs/components/#navigation for more info 
* on Ionic pages and navigation. 
*/ 

@Component({ 
    selector: 'page-phonebook', 
    templateUrl: 'phonebook.html', 
}) 
export class PhonebookPage { 

    items: Array<{title: string, icon:string}>; 
    infos:any; 
    fileHolder:any; 
    choice:boolean; 
    contacts:any; 

    constructor(public navCtrl: NavController, public navParams: NavParams, public newDirectoryOpenModal:ModalController, public beaconProvider:BeaconRestApiProvider, public uploadPopupDirectoryModal: ModalController, public showPhoneBookDirectoryModal: ModalController) { 

     this.getPhonebook(); 
    } 

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

    createNewDirectory(fab: FabContainer){ 

     console.log('This button creates a new directory'); 

     const showCreateDirectoryModal = this.newDirectoryOpenModal.create(ModalCreateNewDirectoryPage); 

     fab.close(); 

     showCreateDirectoryModal.present(); 

    } 

    uploadNewDirectory(fab: FabContainer){ 
     const showuploadPopup = this.uploadPopupDirectoryModal.create(PopupUploadCsvPage); 

     fab.close(); 

     showuploadPopup.present(); 

    } 


    getPhonebook() { 
     this.beaconProvider.getPhoneBookDirectories() 
     .then(data => { 
      this.infos = data; 

     }, (err) => { 
      console.log(err); 
     }); 
    } 

    phonebookIdentity(phonebook){ 
     var phonebook_id = phonebook.phonebook_id; 
     this.beaconProvider.showPhonebookDirectoryList(phonebook_id) 
     .then(data => { 


      const showDirectoryList = this.showPhoneBookDirectoryModal.create(ModalShowPhonebookDirectoryPage,{list:data}); 

      showDirectoryList.present(); 

     }, (err) => { 
      console.log(err); 
     }); 
    } 

} 

und meine modalen component.ts, die die modale Form

import { Component, OnInit } from '@angular/core'; 
import { NavController, NavParams, ViewController,LoadingController,ToastController} from 'ionic-angular'; 
import { FormGroup, FormArray, FormBuilder, FormControl, Validators } from '@angular/forms'; 
import { BeaconRestApiProvider } from '../../providers/beacon-rest-api/beacon-rest-api'; 

/** 
* Generated class for the ModalCreateNewDirectoryPage page. 
* 
* See http://ionicframework.com/docs/components/#navigation for more info 
* on Ionic pages and navigation. 
*/ 


@Component({ 
    selector: 'page-modal-create-new-directory', 
    templateUrl: 'modal-create-new-directory.html', 
}) 
export class ModalCreateNewDirectoryPage implements OnInit { 



    public createDirectoryForm: FormGroup; 
    //directoryInfo: { phonebook_name: string, number: string, personName: string, age: string, address: string} = { phonebook_name:'', number: '', personName: '', age: '', address:''}; 

    constructor(public navCtrl: NavController, public navParams: NavParams, public newDirectoryView:ViewController, public formBuilder: FormBuilder, public beaconProvider:BeaconRestApiProvider, public pageLoader: LoadingController, public toast : ToastController) { 

    } 

    /*ngOnInit(){ 
     this.createDirectoryForm = this.formBuilder.group({ 
      directoryName:['',Validators.required], 
      fields: this.formBuilder.array([ 
       this.initFormChild(), 
      ]) 

     }); 
    }*/ 

    ngOnInit(){ 
     this.createDirectoryForm = this.formBuilder.group({ 
      directoryName:['',Validators.required], 
      fields:this.formBuilder.array([ 
       this.initField(), 
       ]) 
     }); 
    } 

    initField() { 
     return this.formBuilder.group({ 
      number:['',Validators.required], 
      personName: ['',Validators.required], 
      age:['',Validators.required], 
      address:['',Validators.required], 
     }); 
    } 

    addField() { 
     const control = <FormArray>this.createDirectoryForm.controls['fields']; 
     control.push(this.initField()); 
    } 

    removeField(i: number) { 
     const control = <FormArray>this.createDirectoryForm.controls['fields']; 
     control.removeAt(i); 
    } 

    save(form){ 
     console.log(form); 
     var i; 
     var phonebookName = form.controls.directoryName._value; 
     var fields_array = []; 
     var record_set = []; 
     var fields = form.controls.fields.controls; 
     phonebookName = {"phonebook_name":phonebookName}; 
     var address,age,number,personName; 
     var directory_header = ['number','name','age','address']; 
     record_set.push(directory_header); 


     for(i = 0; i < fields.length ; i ++){ 
      if(fields[i]._value.address !=""){ 
       address = fields[i]._value.address; 
      } 
      else{ 
       address = '_'; 
      } 
      if(fields[i]._value.age !=""){ 
       age = fields[i]._value.age; 
      } 
      else{ 
       age = '_'; 
      } 
      if(fields[i]._value.number !=""){ 
       number = fields[i]._value.number; 
      } 
      else{ 
       number = '_'; 
      } 
      if(fields[i]._value.personName !=""){ 
       personName = fields[i]._value.personName; 
      } 
      else{ 
       personName = '_'; 
      } 


      fields_array = [number,personName,age,address]; 
      record_set.push(fields_array); 

      //console.log(i.controls.number._value); 
      //console.log(i.controls.personName._value); 
     } 

     var phonebookdetails_array = record_set; 

     this.beaconProvider.getPhonebookId(phonebookName).then((res) => { 
      var phonebookId = res; 
      var manual_phonebook_array = {"phonebook_id":phonebookId,"phonebook_content":phonebookdetails_array}; 
      let loadingPage = this.pageLoader.create({ 
       content: 'Processing your request...', 
       showBackdrop:false 
      }); 
      loadingPage.present(); 

      this.beaconProvider.addPhonebookDirectory(manual_phonebook_array).then((res)=>{ 
       setTimeout(() => { 
        loadingPage.dismiss(); 
        this.toast.create({ 
        message: `Phonebook Directory Added`, 
        duration: 3000, 
        position: "top", 
       }).present(); 
       this.closeNewDirectoryModal(); 
       }, 5000); 


      },err=>{ 
       console.log(err); 
      }) 


     }, (err) => { 
      console.log(err); 
     }); 



    } 




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

    closeNewDirectoryModal(){ 
     this.newDirectoryView.dismiss(); 
    } 



} 

Ich denke, das ist genug, um zu zeigen, was ich will geschehen, aber wenn nicht kontrolliert Gib mir Bescheid.

Answer 1

Da Sie das neue Verzeichnis in einen Dienst übergeben; Sie können das neue Verzeichnis einem BehaviourSubject im Dienst zuweisen, den Sie dann als Observable und subscribe aus einer beliebigen Komponente zurückgeben können.