首次成功（貌似）成功删除后，无法按角度更新列表

Question

我在使用Ionic构建任务列表时正在关注Angular英雄教程。我在本教程的“ http”部分，但无法使用RxJS删除任务。

发生了什么：

1. 在任务上滑动，该任务将从视图中删除。
2. 此后，删除（滑动或单击）将不再适用于其余任何任务。
3. 此外，使用同级组件添加任务会部分起作用（如“消息”组件所报告），但是添加的任务不再显示在任务列表中。
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'))
    );
  }

 ...
}

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

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>