I am currently working on an exciting project to develop an Ionic notes application, where users can easily rearrange items in the list using the reorderArray() function. However, I encountered an issue with Firebase resulting in an error message related to this.notesList.
Argument of type 'Observable' is not assignable to parameter of type 'any[]'. Property 'length' is missing in type 'Observable'.
I am seeking guidance on how to integrate Firebase correctly into my project. Your assistance would be highly appreciated. Below is a snippet of my code:
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>
Typescript:
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);
}
}