I appeal to the local Web Api at http: // localhost: 50806 / api / Users . It returns:

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

In the app folder there is a file user.ts

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

File api access:

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

Component file:

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

The page is empty and there are no errors in the console, tell me what is wrong?

Update! The main module:

 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 { }
  • Why did you add HttpService to Providers? - Sherzod Yorov
  • @ Sherzodёrov did on the guide on the site. Before this, the server was accessed in the component. - Lada
  • Strange ... did you add the HttpClientMOdule module to the core? In the component in Providers it is not needed. You through the designer will inject it. - Sherzod Yorov
  • @Sherzodёrov Updated the question, added the main module. - Lada
  • in Imports add HttpClientModule - Sherzod Yorov

1 answer 1

Your module file should look something like this.

 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 { }

You imported the HttpClientModule, but you did not add an import to the file. 2. Secondly, you must make sure that the data comes. 3. In the service something corrected

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

Note where your User.ts file is located.

  1. change the component file in the component file

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