0

Обращаюсь к локальному 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 { }
7
  • Зачем вы в Providers добавили HttpService? 1 мар 2018 в 17:09
  • @ШерзодЁров делал по гайду на сайте. Перед этим обращались к серверу в компоненте.
    – Lada
    1 мар 2018 в 17:12
  • Странно... вы в основой модуль HttpClientMOdule добавили? В компоненте в Providers он не нужен. Вы через конструктор инжектите его. 1 мар 2018 в 17:16
  • @ШерзодЁров Обновил вопрос, добавил основной модуль.
    – Lada
    1 мар 2018 в 17:20
  • в Imports добавьте HttpClientModule 1 мар 2018 в 17:20

1 ответ 1

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.

  1. файл компонента в файле компонента поменяйте

    ngOnInit(){ this.httpService.getUsers().subscribe((data) => this.users=data); }

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.