Abbrechen eines Abonnements in eckigen 2/4

Question

Auf der Last der Komponente Ich abonniere ein Array von Werten und zeigt das gleiche in List und Drop Down, die gut funktioniert. Dann habe ich "Add button" hinzugefügt, der ein Objekt zu einem Array hinzufügt und dasselbe in einer Liste anzeigt.

Ausgabe ist wie auch, wenn ich aus dem Abonnement bin abzumelden selbst dann wird es den Wert hinzuzufügen, wenn ich auf Schaltfläche Hinzufügen bin klicken, könnte jemand mir bitte mitteilen, warum diese

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

Unten ist mein 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(); 
} 
} 

und Servicecode

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

Sie können die Änderungen Ihrer addPhone-Methode auch dann sehen, wenn Sie sich vorher abmelden, da Ihre Methode das in der Komponente verwendete Array manipuliert.

Stattdessen sollten Sie Ihr vorhandenes Array kopieren und das neue Element zum kopierten Array hinzufügen. Mit dem Spread-Operator könnte das so einfach sein wie:

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