Question

在组件的加载上，我订阅了一个值数组，并在List和Drop Down中显示相同的工作正常。然后我添加了＃34;添加按钮＆＃34;这是将对象添加到数组并在List中显示相同的对象。

问题就像即使我在订阅时取消订阅，即使它在点击添加按钮时添加了值，也可以让我知道为什么会发生这种情况

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

 }

Answer 1

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

相反，您应该复制现有数组并将新元素添加到复制的数组中。通过使用扩展运算符，这可以很简单：

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

以角度2/4取消订阅

1 个答案: