Angular 2、Observable 更新添加一个项目，但不删除

Question

感谢阅读这个问题。

无论如何，我已经创建了一个处理项目列表的服务（有名称和价格）这个服务returns 一个 observable ，我的 ListComponent 订阅了它。

奇怪的是，当我添加一个项目时，订阅起作用并且 ListComponent 列表被更新，当我删除一个项目时，订阅不起作用，它不会发送任何错误。

列表组件：

    export class ListComponent {


  listItems: ListItem[];
  itemName: string;
  itemPrice: number;
  constructor(private listService: ListItemService){
     this.listService.getItems().subscribe((res) => {
      this.listItems=res;
    },
       (error)=>{
       console.log(error);
       })
  }
  public addNewItem(itemName:string,itemPrice:number):void{
    this.listService.create(itemName,itemPrice);
  }
  public deleteItem(itemName:string){
    this.listService.delete(itemName);
  }

}

列表服务：

  @Injectable()
export class ListItemService {

  private listItems:ListItem[] = [];
  private listObservable: Observable<ListItem[]>;


  constructor() {
    this.listItems.push(new ListItem("item1",100));
    this.listItems.push(new ListItem("item2",200));
    this.listItems.push(new ListItem("item3",300));
    this.listItems.push(new ListItem("item4",400));

    this.listObservable = Observable.of(this.listItems);
  }
  getItems(): Observable<ListItem[]> {
    return this.listObservable;

  }
  getItemById(name: String): Promise<ListItem> {
    return new Promise((resolve) =>{
      resolve(this.getListItemByName(name));
    })
  }
  delete(name: String): Promise<ListItem[]> {
   let item = new ListItem(name,0);
   this.listItems = this.listItems.filter((item:ListItem)=>item.name !== name);
   return new Promise((res)=>{
     res(item);
   })
  }
  create(name: string, price:number): Promise<ListItem> {
    let item: ListItem = new ListItem(name,price);
    this.listItems.push(item);
    return new Promise((res)=>{
      res(item);
    })
  }}

感谢阅读（并希望有所帮助）

Answer 1

首先，您的 observable 除了从服务获取初始 listItems 数组外没有做任何事情。在那之后，observable 永远不会被解雇。您应该为此使用主题。

无论如何，你的问题的原因是当你添加时，你正在改变 listItems（通过调用 push）。不呼叫订户。该组件只看到此更改，因为它仍然指向原始 listItems 数组对象。

删除时，您是在服务中创建一个新的 listItems 数组，而不是改变它。该组件仍在查看旧的 listItems 数组，因此它看不到该更改。

你应该做的是这样的：

@Injectable()
export class ListItemService {
  private listItems: ListItem[] = [];
  private listSubject = new Subject<ListItem[]>();
  private listObservable = this.listSubject.asObservable();

  constructor() {
    this.listItems.push(new ListItem("item1",100));
    this.listItems.push(new ListItem("item2",200));
    this.listItems.push(new ListItem("item3",300));
    this.listItems.push(new ListItem("item4",400));
  }
  getItems(): Observable<ListItem[]> {
    return this.listObservable;
  }
  delete(name: String): Promise<ListItem[]> {
   let item = new ListItem(name,0);
   this.listItems = this.listItems.filter((item:ListItem)=>item.name !== name);
   this.listSubject.next(this.listItems);
  }
  create(name: string, price:number): Promise<ListItem> {
    let item: ListItem = new ListItem(name,price);
    this.listItems = [...this.listItems, item]; // better not to mutate
    this.listSubject.next(this.listItems);
  }}

Angular 2、Observable 更新添加一个项目，但不删除

Angular 2 , Observable updates adding an item, but not deleting

angular

typescript

observable

subscribe