无法读取 ionic 2 中未定义的属性 $key答案

【问题标题】：cannot read property $key of undefined in ionic 2无法读取 ionic 2 中未定义的属性 $key
【发布时间】：2017-11-06 18:16:33
【问题描述】：

我正在尝试在我的 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 = "let info of infos | async" ...

感谢您的帮助

【问题讨论】：

您的问题中没有足够的代码来确定。据推测，infos 是 Promise 或 Observable 正在解析或推送 undefined
infos 是infos: FirebaseListObservable<any>，您需要其他信息吗？ @Aluan Haddad
是的，undefined 可分配给any。在这种情况下使用 any 基本上可以抑制由于错误的映射调用（缺少返回或括号）、意外地将 void 函数映射到可观察对象以及大量其他错误而导致的任何可能的类型错误。不要使用any，除非在极少数情况下逗号不是其中之一，因为您显然有对象的预期形状。无论如何，调试它的最简单方法是订阅您的视图模型中的可观察对象并简单地记录每个值
感谢@AluanHaddad。我不明白如何记录每个值？
设置this.infos = whatever;后在视图模型（.ts文件）中添加this.infos.subscribe(console.log)

标签： angular firebase firebase-realtime-database ionic2

【解决方案1】：

我遇到了类似的问题，后来我浏览了here提供的示例代码。键值是从 snapshotChanges() 获得的。所以在这里，我使用 JSX 传播属性来存储每个孩子的键值，如下所示。

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

【讨论】：

【解决方案2】：

我假设您在这里使用的是 firebase。您永远不会从角度 ngFor 获得 $key，因为它不属于结构数组，因为 $key 是标识符，而不是 firebase 数据结构中的属性。

当您第一次得到它时，您可以将push 和$key 放到阵列上。虽然你没有展示你是如何得到infos的，但我认为它会是这样的。

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

在返回的 Promise 中，您可以访问 $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) 方法中将其用作标识符。

【讨论】：

谢谢！！ @gerdi