Ionic 2：从 Firebase 重新排序项目

Question

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

上收到此错误

Argument of type 'Observable' is not assignable to parameter of type 'any[]'. Property 'length' is missing in type '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);
}

履行承诺loader.present"the rxjs way"
切换到第二个 Observable。 .valueChanges() returns 一个 Observable。
订阅第二个 Observable 以获取流值
将值写入this.notesList触发UI-Bindings

编辑

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

有（至少）两种显示通过可观察管道流式传输的值的方法。一种是模板中的异步管道，另一种是我解释的方式。异步管道订阅引擎盖下的可观察对象和 returns 值。但是有了管道，您就不能那么容易地重新订购商品了。

Ionic 2：从 Firebase 重新排序项目

Ionic 2: Reorder items from Firebase

firebase

typescript

ionic-framework

ionic2

angular