docs(db): fix rtdb lists

Author: davideast

docs/rtdb/lists.md

@@ -204,15 +204,16 @@ itemsRef.remove();
 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>
+      <button (click)="updateItem(item.key, updatetext.value)">Update</button>
+      <button (click)="deleteItem(item.key)">Delete</button>
     </li>
   </ul>
   <input type="text" #newitem />
@@ -225,7 +226,10 @@ export class AppComponent {
   items: Observable<any[]>;
   constructor(db: AngularFireDatabase) {
     this.itemsRef = db.list('messages');
-    this.items = this.itemsRef.valueChanges();
+    // 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() }));
+    });
   }
   addItem(newName: string) {
     this.itemsRef.push({ text: newName });