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