Pfthb

I am following the Angular hero tutorial while using Ionic to build a task list. I am at the 'http' part of the tutorial but got stuck at deleting tasks using RxJS.

What happened:

1. Swipe on a task, the task is deleted from the view.


2. Afterwards, deletion (swipe or click) no longer works with any of the remaining tasks.


3. Also, adding a task using a sibling component partially works (as reported by the "message" component), but added tasks no longer show up on the task list.


4. Updating any remaining task seemingly still works.

I first suspected it was some conflict with Ionic, but even if I changed the swipe action to normal clicking events, the same thing happens.

Here are the codes for related components. Any help will be much appreciated!

You can find the code here: https://github.com/hktang/butler

tasks.page.html

<ion-header>
 <ion-toolbar>
 <ion-title>Tasks</ion-title>
 </ion-toolbar>
</ion-header>

<ion-content padding>

 <ion-list>
 <app-task-input [tasks]="tasks"></app-task-input>
 <app-task-list 
 [tasks]="tasks"
 (selectedTaskChange)="onSelectedTaskChange($event)"
 ></app-task-list>
 </ion-list>

 <app-task-detail [task]="selectedTask"></app-task-detail>

 <app-messages></app-messages>

</ion-content>

tasks.page.ts

import Component, OnInit from "@angular/core";
import Task from "./task";
import TaskService from "./task.service";

@Component(
 selector: "app-tasks",
 templateUrl: "./tasks.page.html",
 styleUrls: ["./tasks.page.scss"]
)
export class TasksPage implements OnInit 
 selectedTask: Task;
 tasks: Task;

 constructor(private taskService: TaskService) 

 ngOnInit() 
 this.getTasks();
 

 getTasks(): void 
 this.taskService.getTasks().subscribe(tasks => (this.tasks = tasks));
 

 onSelectedTaskChange(task: Task): void 
 this.selectedTask = task;
 

task.service.ts

import Injectable from "@angular/core";
import HttpClient, HttpHeaders from "@angular/common/http";
import Observable, of from "rxjs";
import Task from "./task";
import MessageService from "../messages/message.service";
import catchError, map, tap from "rxjs/operators";

const httpOptions = 
 headers: new HttpHeaders( "Content-Type": "application/json" )
;

@Injectable(
 providedIn: "root"
)
export class TaskService number): Observable<Task> 
 const id = typeof task === 'number' ? task : task.id;
 const url = `$this.tasksUrl/$id`;

 return this.http.delete<Task>(url, httpOptions).pipe(
 tap(_ => this.log(`deleted task id=$id`)),
 catchError(this.handleError<Task>('deleteTask'))
 );
 

 ...

task-list.component.html

<ion-list *ngIf="tasks">
 <ion-item-sliding
 *ngFor="let task of tasks"
 (ionSwipe)="markDone(task)">

 <ion-item
 (click)="onSelect(task)"
 [class.selected]="task === selectedTask">
 <ion-label>task.name</ion-label>
 </ion-item>

 <ion-item-options side="right">
 <button ion-button (click)="markDone(task)">Done</button>
 </ion-item-options>

 </ion-item-sliding>
</ion-list>

task-list.component.ts

import Component, EventEmitter, OnInit, Input, Output from "@angular/core";
import Task from "../task";
import TaskService from "../task.service";

@Component(
 selector: "app-task-list",
 templateUrl: "./task-list.component.html",
 styleUrls: ["./task-list.component.scss"]
)
export class TaskListComponent implements OnInit 
 selectedTask: Task;

 @Input()
 tasks: Task;

 @Output()
 selectedTaskChange = new EventEmitter<Task>();

 constructor(private taskService: TaskService) 

 ngOnInit() 

 onSelect(task: Task): void 
 this.selectedTask = task;
 this.selectedTaskChange.emit(task);
 

 markDone(task: Task)
 this.tasks = this.tasks.filter(tsk => tsk !== task);
 this.taskService.deleteTask(task).subscribe();
 

changing the code of showing tasks to just this should fix the problem

<ion-item-sliding *ngFor="let task of tasks" (ionSwipe)="markDone(task)">
 <ion-item>task.name</ion-item>
 <ion-item-options> </ion-item-options>
</ion-item-sliding>