Пустая страница при обращении к API Angular

306

02 марта 2018, 18:57

Обращаюсь к локальному Web Api по адресу http://localhost:50806/api/Users. Он возвращает:

[
     {"UserId":1,"Name":"O. Cole"},
     {"UserId":2,"Name":"J. Shane"},
     {"UserId":3,"Name":"V. Petrov"},
     {"UserId":4,"Name":"M. Popov"}
]

В папке app есть файл user.ts

export class User{
    UserId: number;
    Name: string;
}

Файл обращения к api:

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
@Injectable()
export class HttpService{
    Url = 'http://localhost:50806/';
    constructor(private http: HttpClient){ }
    getUsers(){
        return this.http.get(this.Url + 'api/Users');
    }
}

Файл компонента:

import { Component, OnInit} from '@angular/core';
import { HttpService} from './http.service';
import {User} from './user';
@Component({
    selector: 'my-app',
    template: `<ul>
                <li *ngFor="let user of users">
                <p>Имя пользователя: {{user?.Name}}</p>
                </li>
            </ul>`,
    providers: [HttpService]
})
export class AppComponent implements OnInit { 
    users: User[];
    constructor(private httpService: HttpService){}
    ngOnInit(){
        this.httpService.getUsers().subscribe((data: User[]) => this.users=data);
    }
}

Страница пуста и нет ошибок в консоле, подскажите что не так?

Update! Основной модуль:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }   from './app.component';
import { HttpClientModule }   from '@angular/common/http';
@NgModule({
    imports:      [ BrowserModule, FormsModule ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

Answer 1

Файл модуля у вас должен выглядеть примерно так

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

import { AppComponent } from './app.component';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {HttpService} from './app.service';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [HttpService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Вы импортировали HttpClientModule, но не добавили в файл импорта. 2. Во-вторых, вы должны убедится, что данные приходят. 3. В сервисе кое что поправил

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {User} from './user';
@Injectable()
export class HttpService {
  Url = 'ваш URL';
  constructor(private http: HttpClient) {
  }
  getUsers() {
    return this.http.get<User[]>(this.Url);
  }
}

Обратите внимание где находится ваш файл User.ts.