Угловое обновление списка не работает после первого (казалось бы) успешного удаления

Question

Я следую учебному пособию по Angular Hero, используя Ionic для создания списка задач. Я нахожусь в 'http' части учебника, но застрял при удалении задач с помощью RxJS.

Что случилось:

1. Проведите по задаче, задача будет удалена из представления.
2. После этого удаление (смахивание или щелчок) больше не работает ни с одной из оставшихся задач.
3. Кроме того, добавление задачи с использованием одноуровневого компонента частично работает (как сообщает компонент «message»), но добавленные задачи больше не отображаются в списке задач.
4. Обновление любой оставшейся задачи, похоже, все еще работает.

Сначала я подозревал, что это был какой-то конфликт с Ionic, но даже если я изменил действие свайпа на обычные события щелчка, происходит то же самое.

Вот коды для связанных компонентов. Любая помощь будет высоко ценится!

Вы можете найти код здесь: 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 {
  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'))
    );
  }

 ...
}

проблемно-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>

проблемно-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();
  }
}

Answer 1

изменение кода показа задач только на это должно решить проблему

<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>