TypeScriptを使用した角型コンポーネントの未定義サービス

Question

こんにちは、私はJSON REST APIを使用しようとしていますが、要素を削除しようとすると問題が発生します。私はdeleteメソッドを呼び出すとき、私はこのエラーを持っている：

EXCEPTION: Error in ./ClientiComponent class ClientiComponent - inline template:28:16 caused by: this.userService is undefined 

ここClientiComponentコード

import { Component, OnInit, Injectable } from '@angular/core'; 
import { Http, Headers, Response } from '@angular/http'; 
import { User } from 'app/user'; 
import { Observable } from 'rxjs/Rx'; 
import { userService } from './userService' 
import 'rxjs'; 
import 'rxjs/add/operator/toPromise'; 

@Component({ 
selector: 'clienti', 
templateUrl: './clienti.component.html', 
styleUrls: ['./clienti.component.css'] 
}) 
export class ClientiComponent { 
private users = []; 
private userService: userService; 
data: Object; 
loading: boolean; 
selectedUser: User; 
private userUrl = 'http://localhost:3000/users'; 
private headers = new Headers({ 'Content-Type': 'application/json' }); 

constructor(private http: Http) { 
http.get('http://localhost:3000/users') 
    .flatMap((data) => data.json()) 
    .subscribe((data) => { 
    this.users.push(data) 
    }); 
} 


delete(user: User): void { 
alert("error"); 
this.userService 
    .remove(user.id) 
    .then(() => { 

    this.users = this.users.filter(h => h !== user); 
    if (this.selectedUser === user) { this.selectedUser = null; } 
    }); 
} 

私はClientiComponent内部のremoveメソッドを置く場合は、それが正常に動作しますが、代わりに私は、このメソッドを移動する方法を見つけ出すしたいです私のuserService.tsファイルの中に。

ここに私のコードで間違って何ClientiComponent

remove(id: number): Promise<void> { 
    const url = `${this.userUrl}/${id}`; 
    alert("url"); 
    return this.http.delete(url, {headers: this.headers}) 
     .toPromise() 
     .then(() => null) 
     .catch(this.handleError); 
    } 

から呼び出さUserServiceの中に方法はありますか？

Answer 1

コンストラクタ内でサービスをインポートして、今すぐチェックしてみてください。 `例外：

constructor(
     private userService: userService){} 

delete(user: User): void { 
alert("error"); 
this.userService 
    .remove(user.id) 
    .then(() => { 

    this.users = this.users.filter(h => h !== user); 
    if (this.selectedUser === user) { this.selectedUser = null; } 
    }); 
} 

Answer 2

コンストラクタで注入するサービスこのように、あなたのClientiComponent、：

constructor(private http: Http, private _userService: UserService) { 
    //your constructor code... 
} 

あなたはofficial documentation/tutorialsに注入サービスなどについての詳細を読むことができます（サブセクション：HeroServiceを注入）

また、私は良い練習とネームサービスの使用大文字を使用することをお勧めします（user.service.tsのfe UserService）