Click here to Skip to main content
15,879,535 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i wanted to update particular record from firebase real time database. Here i have created data list and 2 button named delete and edit.On Edit button i have called modal window.That window contain form with input field.i wanted to update record based on that modal window value.i don't know how to fetch my passed data on my modal window. here is my code.


What I have tried:

event-list.html

<ion-list *ngFor="let event of events1 | async">
   <ion-item (click)="viewItem(event)">
     <ion-img src="{{event.event_img}}"></ion-img>
     <p>{{event.event_name}}</p>
     <!-- <p>kkk {{event.E_id}}</p> -->
   </ion-item>
   <button ion-button (click)="deleteItem(event.key)" class="button">Delete</button>
   <button ion-button (click)="updateItem(event.key, event.event_name)" class="button">Edit</button>
 </ion-list>


i wanted to update particular record from firebase real time database. Here i have created data list and 2 button named delete and edit.On Edit button i have called modal window.That window contain form with input field.i wanted to update record based on that modal window value.i don't know how to fetch my passed data on my modal window. here is my code.

event-list.html

     <ion-list *ngFor="let event of events1 | async">
    <ion-item (click)="viewItem(event)">
      <ion-img src="{{event.event_img}}"></ion-img>
      <p>{{event.event_name}}</p>
      <!-- <p>kkk {{event.E_id}}</p> -->
    </ion-item>
    <button ion-button (click)="deleteItem(event.key)" class="button">Delete</button>
    <button ion-button (click)="updateItem(event.key, event.event_name)" class="button">Edit</button>
  </ion-list>


event-list.ts


updateItem(key: string, newText: string) {
  var data = { key: key, newText: newText };
  alert(JSON.stringify(data));
  var modalPage = this.modalCtrl.create("EditEventModalPage", { data: data });
  modalPage.present();
}


edit-event-modal.ts


updateItem(nm: string, venue: string) {
   this.data = JSON.stringify(this.navParams.get('data'));
   this.fdb
   .list("/events/").update(this.data[key], { event_name: nm });
 }


edit-event-modal.html


 <ion-card>
<ion-item>
  <ion-label stacked>Event Name</ion-label>
  <ion-input [(ngModel)]="dataEvent.name" type="text"></ion-input>

</ion-item>

<ion-item>
  <ion-label stacked>Event Venue</ion-label>
  <ion-input [(ngModel)]="dataEvent.venue" type="text"></ion-input>
</ion-item>

<ion-item>
  <button ion-button icon-left clear item-right (click)="updateItem(dataEvent.name,dataEvent.venue)">
  <ion-icon name="checkmark"></ion-icon>
  Send
</button>
</ion-item>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900