Html 如何从RESTAPI获取数据到我的视图-Angular 6

我有一个Angular 6应用程序，我想将一些rest api数据连接到我的应用程序中。我已经为此写了一份服务。rest api是：。它从结果对象接收数据。到目前为止，我有以下代码，但它不工作，因为数据未显示在表中：

---

控制台中的错误还有：uncaughttypeerror:无法读取未定义的属性“ngOriginalError”

服务.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!!'));
  };

}

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>

{{事件.u_序列号}
{{事件.产品名称}
{{事件.你的地址{楼层}
{{事件.你的地址{u行}
{{事件.你的地址{邮政编码}

您能检查控制台是否显示一些错误吗？（在Google Chrome上按Ctrl+Shift+I，然后单击控制台）

您必须在应用程序模块中导入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 { }

并使用数据。在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');
    })
  }

---

请为您的错误提供更多的上下文。数据未显示…然后请提供一个关于堆栈的Blitz。我的意思是，您必须在chrome中使用调试器，比如，查看是否获得数据，数据在哪里中断，并尝试找出原因。。这是非常模糊的question@trichetriche未捕获的TypeError:无法读取未定义的属性“ngOriginalError”检查此项：