Typescript：“ Compositions”类型上不存在该属性

Question

I have the following TypeScript file in my Angular2 project:

import {Component} from '@angular/core';
import {CompositionsService} from './compositions.service';

@Component({
 selector: 'compositions',
 template: './compositions.html',
 styles: ['./compositions.css'],
 providers: [CompositionsService]
})

export class Compositions {

 private id: any;
 private instrumentation: string = '';

 constructor(private compositionsService: CompositionsService) { } 

 ngOnInit() {
}

  getCompositions() {
this.CompositionsService.byInstrument(this.id, this.instrumentation)
                 .subscribe(compositions =>    console.log(compositions.json()));
  }
}

This throws the following error:

Property 'CompositionsService' does not exist on type 'Compositions'.

I am setting the CompositionsService as a property of the Compositions in this file:

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class CompositionsService {

  private url: string = 'http://localhost:3000/api';

  constructor(private http: Http) { }
  //TODO you don't actually need to pass an id here maybe just a page limit
  byInstrument(id: any, instrument: string): Observable<any> {
   return this.http.get(this.url + '/compositions?instrumentation=' + instrument);
  }
}

I am not sure how the property is not set on Compositions.

Answer 1

You named it compositionsService :

constructor(private compositionsService: CompositionsService) { }

But you call it CompositionsService :

this.CompositionsService.byInstrument(this.id, this.instrumentation)

Because javascript is case sensitive, the difference in the first character is causing that error, it should be:

this.compositionsService.byInstrument(this.id, this.instrumentation)