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