Ionic 2：从 Firebase 重新排序项目

Question

我目前正在创建一个 Ionic 笔记应用程序，我将允许用户使用 reorderArray() 函数重新排列列表中的项目。但是，我使用的是 Firebase，所以我在 this.notesList 上收到此错误。

“Observable”类型的参数不能分配给 键入“任何 []”。 “可观察”类型中缺少属性“长度”。

我不确定如何将它与 Firebase 一起使用，所以任何事情都会有所帮助。这是我的代码：

HTML：

<div *ngIf="editmode">
  <ion-list reorder="true" (ionItemReoder)="reorderItem($event)">

    <ion-item *ngFor="let note of notesList | async">
      <ion-checkbox (ionChange)="addToTrash(note.id)"></ion-checkbox>

      <ion-label>
        <h1>{{ note.name }}</h1>
        <span>{{ note.note_date | date: 'shortDate' }}</span>
        <span>{{ note.text }}</span>
        <span>{{ (notesList | async)?.length }}</span>
      </ion-label>

    </ion-item>

  </ion-list>
</div>

打字稿：

export class NotesPage {

  notesList: Observable<any>;
  editmode: boolean = false;
  trash = [];

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public database: AngularFireDatabase,
    public loadingCtrl: LoadingController,
    public alertCtrl: AlertController
  ) {
    this.loadNotes();
  }

  loadNotes() {
    const loader = this.loadingCtrl.create();
    loader.present().then( () => {
      this.notesList = this.database.list('/notes').valueChanges();
      loader.dismiss();
    })
  }

  reorderItem( indexes ) {
    this.notesList = reorderArray(this.notesList, indexes);
  }

}

Answer 1

this.notesList 在您的情况下是一个 Observable。 reorderItems 只能订购 array-likes。所以这样的事情应该可以解决问题。

notesList: any[];

[...]

loadNotes() {
  const loader = this.loadingCtrl.create();

  Observable.fromPromise(loader.present()).switchMap(() => { //1
    return this.database.list('/notes').valueChanges(); //2
  }).subscribe((list) => { //3
    this.notesList = list; //4
    loader.dismiss();
  });
}

reorderItem( indexes ) {
  this.notesList = reorderArray(this.notesList, indexes);
}

1. 执行 promise loader.present“rxjs 方式”
2. 切换到第二个 Observable。 .valueChanges() 返回一个 Observable。
3. 订阅第二个 Observable 以获取流值
4. 将值写入 this.notesList 以触发 UI-Bindings

编辑

<span>{{ (notesList | async)?.length }}</span> 必须 <span>{{ notesList?.length }}</span> 因为notesList 不再是异步的。

有（至少）两种显示通过可观察管道流式传输的值的方式。一个是模板中的异步管道，一个是我解释的方式。异步管道在底层订阅 observable 并返回值。但是使用管道，您无法轻松地重新排序项目。