Ionic 2:从 Firebase 重新排序物品

Question

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

类型为"可观察"的参数不可分配给 键入"任意[]"。属性"长度"在类型"可观察"中缺失。

我不确定如何将它与 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在您的情况下是可观察的。 reorderItems只能订购类似数组的。所以这样的事情应该可以解决问题。

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. loader.present"RXJS 方式"执行承诺
2. 切换到第二个可观察对象。 .valueChanges()返回一个可观察量。
3. 订阅第二个可观察对象以获取流值
4. 将值写入 this.notesList 以触发 UI 绑定

编辑

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

(至少(有两种方法可以显示通过可观察管道流式传输的值。一个是模板中的异步管道，一个是我解释的方式。异步管道订阅引擎盖下的可观察量并返回值。但是使用管道，您无法那么轻松地重新订购项目。