Angulaire 2, mises à jour observables ajoutant un élément, mais ne supprimant pas

Question

merci d'avoir lu cette question.

Quoi qu'il en soit, j'ai créé un service qui gère les listes d'éléments (qui ont un nom et un prix) Ce service renvoie un observable, auquel ma ListComponent s'abonne. Ce qui est bizarre, c'est que quand j'ajoute un item, l'abonnement fonctionne et la liste ListComponent est mise à jour, quand je supprime un item, l'abonnement ne fonctionne pas, il n'envoie aucune erreur.

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

Merci pour la lecture (et nous espérons aider)

Answer 1

Tout d'abord, votre observable ne fait rien, sauf obtenir le listItems initial tableau du service. L'observable n'est jamais tiré après ce point. Vous devriez utiliser un sujet pour cela.

Quoi qu'il en soit, la raison de votre problème est que lorsque vous ajoutez, vous mutez listItems (en appelant push). L'abonné n'est pas appelé. Le composant ne voit que cette modification car il pointe toujours vers l'objet de tableau listItems d'origine.

Lorsque vous supprimez, vous créez un nouveau tableau listItems dans le service plutôt que de le transformer. Le composant regarde toujours le vieux tableau listItems donc il ne voit pas ce changement.

Ce que vous devez faire est plutôt quelque chose comme ceci:

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