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

Question

感谢您阅读此问题。

无论如何，我已经创建了一个处理项目列表（具有名称和价格）的服务。此服务返回ListComponent订阅的可观察项。

奇怪的是，当我添加一个项目时，订阅工作和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); 
    } 

} 

ListService：

@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

首先，你观察到的是没有做任何东西，除了获得初始listItems来自服务的数组。在这一点之后，观察者从未被解雇。你应该使用这个主题。

无论如何，你的问题的原因是，当你添加，你突变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); 
    }}