Annulation d'un abonnement dans l'angle 2/4

Question

Sur la charge du composant, je souscris à un tableau de valeurs et l'affiche dans List et Drop Down qui fonctionne correctement. Ensuite, j'ai ajouté "Ajouter un bouton" qui ajoute un objet à un tableau et montrant le même dans une liste.

problème est le même quand je suis désinscris de l'abonnement même alors, il ajoute la valeur quand je suis en cliquant sur le bouton Ajouter, pouvait-s'il vous plaît laissez-moi savoir pourquoi cela se passe

Plunker: https://embed.plnkr.co/CoZCakFsx5q8GBWDBZ24/

ci-dessous est mon code

import {Component} from '@angular/core'; 
import {PhoneService} from './phone.service' 
import { ISubscription } from "rxjs/Subscription"; 

@Component({ 
    selector:'phone-list', 
    template:` 
    <ul> 
     <li *ngFor='let phone of phones'> 
     <a [routerLink]="['/phone',phone.id]"> 
      {{phone.name}} 
     </a> 
     </li> 
    </ul> 
    <select> 
     <option *ngFor='let phone of phones' value={{phone.name}}> 
     {{phone.name}} 
     </option> 
    </select> 
    <button (click)='add()'>Add</button> 
    ` 
}) 

export class PhoneListComponent { 

    private phones; 
    private phone$:ISubscription 

    constructor(private ps: PhoneService) { 

    this.phone$=this.ps.getPhoneDetails() 
     .subscribe((data)=> { 
     this.phones=data;console.log(data) 
     }); 
    } 

add() { 
    this.phone$.unsubscribe(); 
    this.ps.addPhone(); 
} 
} 

et le code de service

import 'rxjs/add/observable/of'; 
    import 'rxjs/add/operator/map'; 
    import { Injectable } from '@angular/core'; 
    import { Observable } from 'rxjs/Observable'; 

    export interface Phone { 
    id:number; 
    name:string; 
    } 

@Injectable() 
export class PhoneService { 
    private phoneList : <Phone>[] = [{ 
    name:'Huwaei', 
    id:1 
    },{ 
    name:'Apple', 
    id:2 
    }] 

    getPhoneDetails() { 
    return Observable.of(this.phoneList); 
    } 

    getPhone(id) { 

    return this.getPhoneDetails().map(phones=> 
    phones.find(phone=>phone.id==id) 
    ); 
    } 

    addPhone() { 
    this.phoneList.push({name:'dummy',id:3}); 
    } 

} 

Answer 1

Vous pouvez voir les changements de votre méthode addPhone même si vous vous désabonnez à l'avance parce que votre méthode manipule la matrice qui a été utilisée dans votre composant. A la place, vous devez copier votre tableau existant et ajouter le nouvel élément au tableau copié. En utilisant l'opérateur de propagation, cela pourrait être aussi facile que:

addPhone() 
{ 
    this.phoneList = [ ...this.phoneList, {name:'dummy', id: 3}]; 
}