typescript - Data från API-fel [Kan inte lösa alla parametrar för UserService: (?).]

För närvarande har jag ett litet API där jag hämtar viss användardata eftersom jag lär mig Angular2.

Jag skapade en användarklass [user.ts]:

export class User {
    first_name: string;
    last_name: string;
    email: string;
}

Sedan tjänsten [user.service.ts]:

import {Http} from '@angular/http';
import {User} from '../models/user';
import 'rxjs/add/operator/toPromise';

export class UserService {
    private usersUrl = 'http://localhost:8000/api/user';
    constructor(private http: Http) {
    }

    getUsers(): Promise<User[]> {
        return this.http.get(this.usersUrl)
            .toPromise()
            .then(response => response.json().data)
            .catch(this.handleError);
    }

    private handleError(error: any) {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }
}

Jag har en hemkomponent där jag försöker visa listan över användare för teständamål (användarlistan kommer att ändras till en komponent senare).

import {OnInit, Component} from '@angular/core';
import {UserService} from '../services/user.service'
import {User} from "../models/user";

@Component({
    selector: '<home>',
    templateUrl: 'app/templates/user.component.html',
})
export class HomeComponent implements OnInit {
    users: User[];

    constructor(private userService: UserService) {

    }

    getUsers() {
        this.userService.getUsers().then(users => this.users = users);
    }

    ngOnInit() {
        this.getUsers();
    }
}

Jag tillhandahåller tjänsten i min app.component.ts:

providers: [
        UserService
    ]

och slutligen försöker jag visa datan:

<div *ngIf="users" class="ui celled animated list">

    <div *ngFor="let user of users" class="item">

        <div class="content">
            <div class="header">{{ user.first_name }} {{ user.last_name }}</div>
            {{ user.email }}
        </div>

    </div>

</div>

Finns det något annat som behöver göras?

JSON som hämtas är följande:

[
  {
    "id":1,
    "first_name":"Jameson",
    "last_name":"Ziemann",
    "email":"[email ",
    "created_at":"2016-07-07 06:24:25",
    "updated_at":"2016-07-07 06:24:25"
  }
]

Svar #1

Ja, först och främst behöver du lägga till HTTP_PROVIDERS i providers-arrayen:

providers: [
    HTTP_PROVIDERS,
    UserService
]

Och för det andra behöver du göra din tjänst injicerbar, så att Angular 2 vet att den faktiskt måste lösa konstruktörens argument via beroendeinjektion:

import {Http} from '@angular/http';
import {User} from '../models/user';
import 'rxjs/add/operator/toPromise';

@Injectable() // <-- annotation for Angular 2
export class UserService {
    private usersUrl = 'http://localhost:8000/api/user';
    constructor(private http: Http) {
    }

Även i din UserService försöker du komma åt en data-egenskap efter att ha deserialiserat den, där du redan får arrayen. Överväg att ta bort den så här:

getUsers(): Promise<User[]> {
    return this.http.get(this.usersUrl)
        .toPromise()
        .then(response => response.json())
        .catch(this.handleError);
}

Relaterade artiklar