Currently in the process of developing an app to keep track of assignments using Ionic 2/Typescript and Firebase as the backend database. The main page displays a list of assignments retrieved from the database. Creating a new assignment requires the user to provide a title and due date, which are then stored as one entry in the database without any issues. However, I am facing difficulties getting the newly added entry to display back on the app interface. Previously, I had it working flawlessly with just one user input and an alert instead of a separate page for adding assignments, but encountered challenges when transitioning to a dedicated input page.
I need assistance or advice on whether the issue lies in how I add the entries or how I display them, or perhaps both - any guidance would be greatly appreciated!
Here is the Typescript code snippet for saving a new assignment:
saveItem(){
var assignment = {
title : this.title,
due : this.due,
}
this.assignments.push({
assignment,
});
}
This is the Ionic markup for adding a new assignment:
<form (submit) = "saveItem()" >
<ion-item>
<ion-label floating>Assignment Title</ion-label>
<ion-input type="text" [(ngModel)]="title" name="title"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY HH:mm" [(ngModel)]="due" name="due"></ion-datetime>
</ion-item>
<div padding>
<button type="submit" color="primary" block >Save</button>
</div>
</form>
For displaying the list of assignments, here is the corresponding Ionic code:
<ion-list>
<ion-item *ngFor="let a of assignments | async" (click)="showOptions(a.$key, a.title, a.due)">
{{a.assignment}}
</ion-item>
</ion-list>
The following image illustrates how the data appears in the database: testentry