Angular updating a list doesn't work after first (seemingly) successful delete

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. Deletion (swipe or click) no longer works with any of the remaining tasks.
3. Adding a task using a sibling component works (as reported by the "message" component), but added tasks no longer show up on the list.
4. Updating a 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!

tasks.page.html

<!-- language: 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

<!-- language: typescript -->

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

<!-- language: typescript -->

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 {
  private tasksUrl = "api/tasks";

  constructor(
    private http: HttpClient,
    private messageService: MessageService
  ) {}

 ...

  /** DELETE: delete the hero from the server */
  deleteTask(task: Task | 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

<!-- language: 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></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

<!-- language: typescript -->

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();
  }
}

from Angular updating a list doesn't work after first (seemingly) successful delete