如何在Angular中使用异步管道对列表对象执行CRUD操作？

ng new my-app

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ListService {
  private apiUrl = 'https://api.example.com/list'; // 替换为实际的API地址

  constructor(private http: HttpClient) { }

  getList(): Observable<any[]> {
    return this.http.get<any[]>(this.apiUrl);
  }

  createItem(item: any): Observable<any> {
    return this.http.post<any>(this.apiUrl, item);
  }

  updateItem(id: number, item: any): Observable<any> {
    const url = `${this.apiUrl}/${id}`;
    return this.http.put<any>(url, item);
  }

  deleteItem(id: number): Observable<any> {
    const url = `${this.apiUrl}/${id}`;
    return this.http.delete<any>(url);
  }
}

import { Component, OnInit } from '@angular/core';
import { ListService } from './list.service';

@Component({
  selector: 'app-list',
  template: `
    <ul>
      <li *ngFor="let item of list | async">{{ item.name }}</li>
    </ul>
  `,
  styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
  list: Observable<any[]>;

  constructor(private listService: ListService) { }

  ngOnInit() {
    this.list = this.listService.getList();
  }

  createItem(item: any) {
    this.listService.createItem(item).subscribe();
  }

  updateItem(id: number, item: any) {
    this.listService.updateItem(id, item).subscribe();
  }

  deleteItem(id: number) {
    this.listService.deleteItem(id).subscribe();
  }
}