以角度取消订阅2/4

在组件的负载上，我订购了一个数组数组，并在List和Drop Down中显示相同的数组，并且工作正常。然后我添加了“添加按钮”，它将一个对象添加到数组中，并在列表中显示相同的内容。以角度取消订阅2/4

问题就像是即使当我从订阅退订即使如此，它是增加当我点击添加按钮的值，可以在任何请让我知道为什么发生这种情况

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

下面是我的代码

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

和服务代码

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

}

来源

2017-10-11 Ankit Dwivedi

你可以只做rxjs的.first（）吗？所以你不必取消订阅和它的只是一个？ – misha130

嗨，考虑下次格式化你的代码，如果你想让别人愿意阅读它并帮助你 –

即使您事先取消订阅，您也可以查看addPhone方法的更改，因为您的方法操纵组件内已使用的数组。

相反，您应该复制现有的数组并将新元素添加到复制的数组中。通过使用传播运算符，这可能是如此简单：

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

来源

2017-10-11 13:31:22 Oliver

因此，我从我的订阅方法获得的数据，它返回原来的数组，因为它是和数组通过引用传递它是JavaScript中的Object值被追加到原始数组中，我认为当我将数组转换为Observable时，它会在Array上放置一些包装，或者它会创建我们可以订阅的流，但并非如此 –

即使RxJS和Observable看起来像是神奇的东西，在底部它只是一个回调机制，它转发给定的值而不会将任何精灵灰尘应用到它。 – Oliver

以角度取消订阅2/4

回答

相关问题