Observablesを使用して表示されたデータを挿入時に更新する方法

Question

私はここに尋ねることを決めました。私は一日中Googleの答えを見てきましたが、それを実装する方法はわかりません。基本的には、モーダルからデータを挿入するたびに、親ビューのリストを自動的に更新するようにします。過去に私はObservablesを見つけたことを調査してタイムアウト機能を設定することでこれについて説明しました。今私が知りたいことは、これを私の現在の設定でどのように実装できるかです。ここで

は私のcomponent.ts私はこれは私が起こるにしたいかを示すには十分であるが、そうでない場合を考えるモーダルフォーム

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



} 

を制御

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

} 

と私のモーダルcomponent.tsですお知らせ下さい。

Answer 1

新しいディレクトリをサービスに渡すので、新しいディレクトリをサービス内のBehaviourSubjectに割り当てることができます。このディレクトリはObservableとして返すことができ、subscribeは任意のコンポーネントから返すことができます。