Question

我有一个Angular 6应用程序，我想将一些剩余的api数据连接到我的应用程序中。我已经为此写了一份服务。其余api是：https://demo1049220.mockable.io/api/incident。从结果对象中获取数据。到目前为止，我有以下代码，但由于数据未显示在表中而无法正常工作：

控制台中的错误还包括：未捕获的TypeError：无法读取未定义的属性'ngOriginalError'

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

并在ngFor循环中使用data.result，请检查以下内容：

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

您可以检查控制台是否显示错误？（在Google Chrome上为Ctrl + Shift + I，然后在控制台上单击）

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

2 个答案: