Как получить данные из API для отдыха на мой взгляд - Angular 6

Question

У меня есть приложение Angular 6, я хотел бы подключить некоторые данные API остальных в мое приложение.Я написал сервис для этого.Остальные API: https://demo1049220.mockable.io/api/incident., который принимает данные из объекта результатов.Пока у меня есть следующий код, но он не работает, так как данные не отображаются в таблице:

Также ошибка в консоли: Uncaught TypeError: Невозможно прочитать свойство 'ngOriginalError' из 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');
    })
  }
}

Таблица в html для перечисления данных

<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

Вы должны импортировать свой HttpClientModule в свой модуль приложения, код:

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

и использовать data.result в цикле ngFor, отметьте это:

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

Можете ли вы проверить, отображается ли на консоли какая-то ошибка?(Ctrl + Shift + I в Google Chrome, затем нажмите на консоль)