使用TypeScript的Angular组件中的未定义服务

Question

Hi I'm trying to consume a JSON REST API but I have a problem when I try to delete an element; when I call delete method I have this error:

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

Here ClientiComponent code

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

If I put the remove method inside ClientiComponent it works fine, but instead I want figure out how to move this method inside my userService.ts file.

Here there is method in userService called from 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);
  }

What's wrong with my code?

Answer 1

Inject service in constructor your ClientiComponent , in this way:

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

You can read more about injection services and others in official documentation/tutorials (subsection: Inject the HeroService )

Additionally, I suggest to use good practise and name service use capital letters (fe UserService in user.service.ts)

Answer 2

Try to import the service inside the constructor and check now. see the below code

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