Angular 角度2：数组更新后视图不更新

我有两个部分：

collection.component.ts

import { Component, OnInit } from '@angular/core';
import { CollectService } from '../collect.service';
import { Collectable } from '../collectable.model';
import {Observable} from 'rxjs/Rx';

@Component({
  selector: 'app-collection',
  templateUrl: './collection.component.html',
  styleUrls: ['./collection.component.css'],
  providers: [CollectService]
})
export class CollectionComponent implements OnInit {

  market: Collectable[] = [];
  constructor(private _collectService: CollectService) { }

  ngOnInit():any {
    this._collectService.getMarket().then((collectable: Collectable[]) => {this.market = collectable});
  }

  remove(item: Collectable) {
    this._collectService.removeFromMarket(item);
  }

}

import { Component, OnInit } from '@angular/core';
import { CollectService } from '../collect.service';
import { Collectable } from '../collectable.model';
@Component({
  selector: 'app-market',
  templateUrl: './market.component.html',
  styleUrls: ['./market.component.css'],
  providers: [ CollectService ]
})
export class MarketComponent implements OnInit {

  array: Collectable[] = [];  

  add(item) {
    this._collectService.addToMarket(item);
  }

  constructor(private _collectService: CollectService) { }

  ngOnInit() {
    this.array = this._collectService.getCollectable();
  }

}

import { Injectable } from '@angular/core';
import { Collectable } from './collectable.model';
@Injectable()
export class CollectService {

  private array: Collectable[] = [
    new Collectable ('jQuery', 'A good framework!'),
    {name: 'HTML', desc: 'A basic for web development!'},
    {name: 'CSS', desc: 'A styling weapon!'},
    {name: 'BootStrap', desc: 'A styling framework!'},
    {name: 'Angular', desc: 'A SPA framework!'},
    {name: 'React', desc: 'A SPA library!'},
    {name: 'Redux', desc: 'Go find yourself!'},
  ];

  private market: Collectable[] = [];

  public getCollectable() {
    return this.array;
  }

  public getMarket() {
    return Promise.resolve(this.market);
  }

  addToMarket(item: Collectable) {
    if (this.market.indexOf(item) == -1) {
      Promise.resolve(this.market).then((collection: Collectable[])=>{
        this.market.push(item);
      });
      // console.log('Added item : ' + item.name + ' Desc : ' + item.desc);
    }
    console.log("Array entries : ");
    for(let item2 of this.market){
      console.log('Added item : ' + item2.name + ' Desc : ' + item2.desc);
    }
  }

  removeFromMarket(item: Collectable) {
    this.market.splice(this.market.indexOf(item), 1);
  }
  constructor() { }

}

collection.component.html

<div class="row">
  <div class="col-xs-12">
    <ul class="list-group" *ngIf="market.length > 0">
      <li class="list-group-item" *ngFor="let item of market">
        <span class="badge">{{item.name}}</span>&nbsp;
        <button class="btn btn-danger" (click)="remove(item)">Remove from Collection</button>
        {{item.desc}}
      </li>
    </ul>
    <h3 *ngIf="market.length === 0">Start adding items first!</h3>
  </div>
</div>

<div class="row">
  <div class="col-xs-12">
    <ul class="list-group">
      <li class="list-group-item" *ngFor="let item of array">
        <span class="badge">{{item.name}}</span>&nbsp;
        <button class="btn btn-success" (click)="add(item)">Add to Collection</button>
        {{item.desc}}
      </li>
    </ul>
  </div>
</div>

market.component.html

<div class="row">
  <div class="col-xs-12">
    <ul class="list-group" *ngIf="market.length > 0">
      <li class="list-group-item" *ngFor="let item of market">
        <span class="badge">{{item.name}}</span>&nbsp;
        <button class="btn btn-danger" (click)="remove(item)">Remove from Collection</button>
        {{item.desc}}
      </li>
    </ul>
    <h3 *ngIf="market.length === 0">Start adding items first!</h3>
  </div>
</div>

<div class="row">
  <div class="col-xs-12">
    <ul class="list-group">
      <li class="list-group-item" *ngFor="let item of array">
        <span class="badge">{{item.name}}</span>&nbsp;
        <button class="btn btn-success" (click)="add(item)">Add to Collection</button>
        {{item.desc}}
      </li>
    </ul>
  </div>
</div>

我正在尝试的是，将项目从市场添加到集合中，当它们出现在集合中时，我有一个按钮，该按钮将删除数据

更新：在做了一些日志记录之后，我发现一旦组件发生更改，服务似乎就不会保留数据（意味着从一个组件路由到另一个组件）

---

请告知我做错了什么。

如果您在组件上提供了

CollectService

，将使用每个组件实例创建（并销毁）一个实例

在具有预期生存期的公共父级上提供它，或者使其成为全局（应用程序范围）单例，请在

NgModule

@NgModel({
  providers: [CollectService],
  ...
})
export class AppModule {}

---

明白了！我当时正为那件事挠头。但我没有那样想。非常感谢。顺便问一下，我们是否必须在@NgModel中提供，或者这是一个打字错误？