Angular 2，可观察更新添加项目，但不删除答案

【问题标题】：Angular 2 , Observable updates adding an item, but not deletingAngular 2，可观察更新添加项目，但不删除
【发布时间】：2017-10-31 12:19:07
【问题描述】：

感谢您阅读此问题。

无论如何，我已经创建了一个服务来处理项目列表（具有名称和价格）该服务返回一个 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);
    })
  }}

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

【问题讨论】：

如果解决了您的问题，请点赞并接受答案。谢谢！

标签： angular typescript observable subscribe

【解决方案1】：

首先，除了从服务中获取初始 listItems 数组之外，您的 observable 没有做任何事情。在那之后，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);
  }}

【讨论】：