Question

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

类型'Observable'的参数不能赋值给输入'any []'。 “Observable”类型中缺少属性“length”。

我不确定如何在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＆＃34; rxjs方式＆＃34;
切换到第二个Observable。 .valueChanges()返回一个Observable。
订阅第二个Observable以获取流式传输值
将值写入this.notesList以触发UI-Bindings

修改

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

有（至少）两种显示通过可观察管道流式传输的值的方法。一个是模板中的异步管道，一个是我解释的方式。异步管道订阅引擎盖下的observable并返回值。但是使用管道，您可以轻松地对物品进行重新排序。

Ionic 2：从Firebase重新订购商品

1 个答案: