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

Question

我正在尝试在我的ionic2应用中更新firebase中的数据，我会发现此错误： 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>

在我的html中，我有一个 *ngfor ="让信息的信息| async" ...

谢谢您的帮助

Answer 1

我假设您在此处使用firebase。您永远不会从Angular ngFor获得$key，因为它不是结构阵列的分开，因为$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)方法中用作标识符。

Answer 2

我遇到了类似的问题，后来我浏览了此处提供的示例代码。钥匙值是从 snapshotchanges((获得的。因此，在这里，我使用JSX verribute以以下方式存储每个孩子的密钥值。

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