无法读取离子2中未定义的属性$ key

时间:2017-06-05 21:30:08

标签: angular firebase firebase-realtime-database ionic2

我正在尝试更新我的ionic2应用程序中的firebase中的数据,我收到此错误: 0x2

.TS

cannot read property '$key' of undefined

.html

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

在我的HTML中我有一个* ngFor ="让信息信息|异步" ......

感谢您的帮助

2 个答案:

答案 0 :(得分:1)

我假设你在这里使用firebase。你永远不会从角$key获得ngFor,因为它不是结构数组的一部分,因为$key是一个标识符,而不是firebase数据结构中的属性。

当你第一次得到它时,你可以push$key放到数组上。虽然你没有表明你是如何得到的infos我认为它会是这样的。

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

在返回的承诺中,您可以访问$key,然后您可以将其推送到视图中使用的数组中。

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

然后,您在ngFor视图中使用的数组现在将拥有一个属性info.key,您可以将其用作onValidate(info)方法中的标识符。

答案 1 :(得分:0)

我遇到了类似的问题,后来我浏览了here提供的示例代码。关键值来自 snapshotChanges()。所以在这里,我使用JSX spread属性以下列方式存储每个孩子的键值。

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