在 Typescript 中循环遍历 observable<Object[ ]>

Question

我有一个 firebase 数据库...所以都是 JSON。 我使用 AngularFire2 数据库检索数据...我正在阅读 this 教程...

本题部分代码为：

noteList: Observable<Note[]>

  constructor(public navCtrl: NavController, private noteListService: NoteListService) {
    this.noteList = this.noteListService.getNoteList()
      .snapshotChanges()
      .map(
      changes => {
        return changes.map(c => ({
          key: c.payload.key, ...c.payload.val()
        }))
      });

从这里我想做两件事：

• 1st：在构造函数之外声明一个数组变量，就像noteList 例如：myVar: Note[] = new Array();
• 2nd ：虽然getNoteList() 的结果是可迭代的，并将它们推入该变量以供将来使用...我希望myVar 拥有Note 的多个对象...=> 这些是来自Firebase 的JSON因此 JavaScript 对象...

我该怎么做？

到目前为止，我使用的是以下内容：

this.noteList .forEach(value => console.log(value)); 这会将 noteList 的每个元素记录为 Array [Object] ....

当我执行this.noteList .forEach(value => this.myVar.push(value)); 时，它会说：

'Note[]' 类型的参数可分配给'Note' 类型的参数。 “Note[]”类型中缺少属性“id”

完整的类代码是：

export class HomePage {

  noteList: Observable<Note[]>
  myVar : Note[] = new Array();

  constructor(public navCtrl: NavController, private noteListService: NoteListService) {
    this.noteList = this.noteListService.getNoteList()
      .snapshotChanges()
      .map(
      changes => {
        return changes.map(c => ({
          key: c.payload.key, ...c.payload.val()
        }))
      });
  }

  this.noteList .forEach(value => this.myVar.push(value));

  //Then below, I want to use it in a Jquery 

  $(function() {
     // Also, I don't know how to access neither noteList nor myVar here. Any help here will be appreciated also
  }
}

你能帮我做这件事吗...

Answer 1

使用 RxJS 执行此操作的正确方法是订阅 observable 并在 subscribe 回调中使用 result 执行所有必要的操作。如果未重用 observable，则无需将其保存到 noteList，但可能需要保存订阅才能取消订阅并避免内存泄漏：

  noteListSubscription: Subscription;

  constructor(private noteListService: NoteListService) {
    this.noteListSubscription = this.noteListService.getNoteList()
      .snapshotChanges()
      .map(
      changes => {
        return changes.map(c => ({
          key: c.payload.key, ...c.payload.val()
        }))
      })
      .subscribe(notes => { this.myVar = notes });
  }

  ngOnDestroy() {
    noteListSubscription.unsubscribe();
  }

Subscription 类型应从rxjs 模块导入。