如何从Rest API获取数据到我的视图-Angular 6

Question

I have a Angular 6 application, I would like to connect some rest api data into my application. I have written a service for this. The rest api is: https://demo1049220.mockable.io/api/incident . Which takes in data from a results object. So far I have the following code but it does not work as the data is not showing in the table:

Also error in console is: Uncaught TypeError: Cannot read property 'ngOriginalError' of undefined

Service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http';
import { Observable, of, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class nowService {

  serviceApiUrl: string = 'https://demo1049220.mockable.io/api/incident';

  constructor(
    private http: HttpClient,

  ) { }

  getAll(): Observable<any> {
    return this.http.get<any>(this.serviceApiUrl)
      .pipe(
        catchError(this.handleError)
      );
  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.log(error.error.message)

    } else {
      console.log(error.status)
    }
    return throwError(
      console.log('Something has happened; Api is not working!!'));
  };

}

Component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpEventType, HttpHeaders, HttpRequest, HttpResponse } from '@angular/common/http';
// Services 
import { nowService } from '../../services/servicenow.service';


@Component({
  selector: 'app-service-incident',
  templateUrl: './service-incident.component.html',
  styleUrls: ['./service-incident.component.scss']
})

export class ServiceIncidentComponent implements OnInit {

  public incidents: any; 
  public loading = true;
  public errorApi = false;


  constructor(private service: nowService) {

  }

  ngOnInit() {
    this.service.getAll().subscribe((data) => {
      this.loading = true;
      this.incidents = data;
      this.loading = false;
      console.log('Result - ', data);
      console.log('data is received');
    })
  }
}

Table in html to list the data

<tbody>
          <tr class="" *ngFor="let incident of incidents">
            <td><input type="radio" name="gender">
              <i class="form-icon mr-5"></i>{{incident.u_serial_number}}</td>
            <td>{{incident.u_product_name}}</td>
            <td>{{incident.u_address_floor}}</td>
            <td>{{incident.u_address_line_1}}</td>
            <td>{{incident.u_address_post_code}}</td>
          </tr>
        </tbody>

Answer 1

You have to import your HttpClientModule in your app module, code:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClient,  HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

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

and use data.result in your ngFor loop, check this:

ngOnInit() {
    this.service.getAll().subscribe((data) => {
      this.loading = true;
      this.incidents = data.result;
      this.loading = false;
      console.log('Result - ', data.result);
      console.log('data is recieved');
    })
  }

Answer 2

Can you check if the console is displaying some error ? (Ctrl+Shift+I on Google Chrome, then click on Console)