即使代码中没有错误，也无法在angular2中使用服务时呈现组件

Question

app.module.ts文件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { MarketComponent } from './market/market.component';
import { CollectionComponent } from './collection/collection.component';
import{CollectableService} from "./shared/collectable.service";


@NgModule({
declarations: [
AppComponent,
MarketComponent,
CollectionComponent
 ],
     imports: [
BrowserModule,

 ],
 providers: [CollectableService],
 bootstrap: [AppComponent]
 })
 export class AppModule { }

collectable.service.ts

 import{Collectable} from "./collectable.model";

 export class CollectableService{
    public collectables:Collectable[]=[
                  {description:'Add a Book',type:'book'},
                  {description:'Add a Mobile',type:'mobile'},
                  {description:'Add a Laptop',type:'laptop'},
                  {description:'Add a Tablet',type:'tab'}
                ];

                  getCollectables()
                  {
                    return this.collectables;
                  }

                }

market.component.ts

  import { Component, OnInit } from '@angular/core';
  import{CollectableService} from "../shared/collectable.service";

  @Component({
   selector: 'app-market',
   templateUrl: './market.component.html',


   })
  export class MarketComponent implements OnInit {
 collectables=[];
 OnAddCollection()
 {
  alert('Hello');
  }

    constructor(private collectableService:CollectableService) { }

    ngOnInit() {
   this.collectables = this.collectableService.getCollectables();
   }

   }

collectable.model.ts

  export class Collectable{
  public description:string;
  public type:string;

  constructor(description:string,type:string){
   this.description=description;
   this.type=type;
  }

  }

collection.component.ts

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit() {
  }
  }

app.component.ts

 import { Component } from '@angular/core';


@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],

  })
 export class AppComponent {
  title = 'app works!';
  }

当我运行这个项目时，我无法从可收集的服务中获取数据，从我这边我认为一切都是正确的但不知道我的数据没有得到渲染。我没有收到任何错误消息，仍然没有输出。任何人都可以看到我错在哪里。