CODEWITHSUNDEEP
angularfirebasefirebase-realtime-databaseionic2
YLM
YLM

Reputation: 345

cannot read property $key of undefined in ionic 2

I am trying to update data in firebase in my ionic2 app and I get this error : cannot read property '$key' of undefined

.ts

onValidate(info): void{
  //console.log(info.$key);
  this.infos.update(info.$key,{
    FirstName : info.FirstName,
    LastName : info.LastName
  })
}

.html 

<button
  ion-button
  type="submit"
  block
  [disabled]="!f.valid"
  (click)="onValidate(info)">Valider</button>

in my html I have an *ngFor = "let info of infos | async" ...

Thank you for your help

Upvotes: 0

Views: 1157

Answers (2)

DEEPAN KUMAR
DEEPAN KUMAR

Reputation: 174

I faced the similar issue, later I gone through the example code provided here. The key values are obtained from snapshotChanges(). So here, I used JSX spread attribute to store the key value for every child in the following way.

import { Component } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  template: `
  <ul>
    <li *ngFor="let item of items | async">
      <input type="text" #updatetext [value]="item.text" />
      <button (click)="updateItem(item.key, updatetext.value)">Update</button>
      <button (click)="deleteItem(item.key)">Delete</button>
    </li>
  </ul>
  <input type="text" #newitem />
  <button (click)="addItem(newitem.value)">Add</button>
  <button (click)="deleteEverything()">Delete All</button>
  `,
})
export class AppComponent {
  itemsRef: AngularFireList<any>;
  items: Observable<any[]>;
  constructor(db: AngularFireDatabase) {
    this.itemsRef = db.list('messages');
    // Use snapshotChanges().map() to store the key
    this.items = this.itemsRef.snapshotChanges().map(changes => {
      return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
    });
  }

Upvotes: 0

user1752532
user1752532

Reputation:

I assume you are using firebase here. You would never get the $key from angular ngFor as it is not apart of the structural array, because $key is an identifier, not a property in the firebase data structure.

What you can do it push the $key onto the array when you first get it. Although you do not show how you are getting infos i assume it would be something like.

this.api.get(`mydatabase/infos`).then(infosData => {
     this.infos = infodata;
});

In the returned promise you have access to $key which is where you can then push it into the array used in the view.

this.api.get(`mydatabase/infos`).then(infosData => {
   infosData.forEach((el,idx) => {
        console.log(el.$key);
        // Use the index as you should be pushing onto an object literal
        // Of course this could be different depending how you have 
        // structured the data being returned for firebase which is not
        // specified in your question
        infos[idx].push('key') = el.$key;
    }); 
});

Then your array being used in the view for the ngFor will now have a property info.key which you can use as an identifier in your onValidate(info) method.

Upvotes: 1

Related Questions