Ionic 4 Arrow Functions

Question

I am creating a to do list app with Ionic 4. When the user clicks add a task an alert opens. However when a task is put it the input and the add task button is clicked, nothing happens. I feel like there is an issue with my arrow function but I am not familiar enough with them to spot the problem. I have attached a photo of the bit of code I think is the issue and the link to my github. I would really appreciate feedback and a solution!

To do list github

Answer 1

I see two issues with the code here:

1. this.tasks = this.taskList.valueChanges(); This returns an observable so you must use an async pipe to retrieve its value within the template such as:

   *ngFor="let task of tasks | async"

2. The input was set for a different name, the input name here is "title" and that is how the data returned within the arrow function should be referenced as well

async addItem(){
    let addItem = await this.alertCtrl.create({
      header: 'Add a Task',
      message: 'Please enter a Task',
      inputs: [{
         name: 'title',
         type: 'text'
      }],
      buttons:[{
        text: 'Cancel',
        role: 'cancel'
      },{
        text: 'Add Task',
        handler: data => {

          let newTaskRef = this.taskList.push(
            { id: '', title: data.title, status: 'open' }
            );
            newTaskRef.update( { id: newTaskRef.key } );

        }
      }]
    })

    await addItem.present();
  }