Empty page when accessing the Angular API

Question

Empty page when accessing the Angular API

Accessing 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"}
]

There is a user.ts file in the app folder

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

Api call file:

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

0

javascript angular2

Author: Lada, 2018-03-01

Source

1 answers

score 1 · Accepted Answer

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 HttpClientModule, but you didn't add it to the import file. 2. Second, you need to make sure that the data is coming in. 3. I corrected something in the service

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.

Component file in the component file, change

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