ionic 3 angular 5 restapi 请求不起作用

Question

我正在尝试从 api 获取数据，但无法打印应用程序中的值。没有正确读取 json。不知道我做错了什么......任何帮助都会有所帮助。我需要能够在 json 中向下解析以获取strat_name

这是我的代码

home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { RestApiProvider } from '../../providers/restapi/restapi';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    names: string[];
    errorMessage: string;
    descending: boolean = false;
    order: number;
    column: string = 'name';

    constructor(public navCtrl: NavController, public rest: RestApiProvider) { }

    ionViewDidLoad() {
        this.getNames();
    }

    getNames() {
        this.rest.getNames()
            .subscribe(
                names => this.names = names,
                error =>  this.errorMessage = <any>error
            );
    }


    sort() {
        this.descending = !this.descending;
        this.order = this.descending ? 1 : -1;
    }
}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Name List
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-searchbar [(ngModel)]="terms"></ion-searchbar>
  <button ion-button type="button" (click)="sort()">Sort</button>
    <h1>{{names | json}}</h1>
  <ion-item *ngFor="let c of names | search : terms | sort: {property: column, order: order}">
    <h2>{{c.strat_name}}</h2>
  </ion-item>
</ion-content>

restapi：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { map, catchError } from 'rxjs/operators';

@Injectable()
export class RestApiProvider {

    private apiUrl = 'https://macrostrat.org/api/v2/defs/strat_names?all';

    constructor(public http: HttpClient) {
        console.log(this.apiUrl);
    }

    getNames(): Observable<string[]> {
        return this.http.get(this.apiUrl).pipe(
            map(this.extractData),
            catchError(this.handleError)
        );
    }

    private extractData(res: Response) {
        let body = res;
        return body || {};
    }

    private handleError (error: Response | any) {
        let errMsg: string;
        if (error instanceof Response) {
            const err = error || '';
            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
            errMsg = error.message ? error.message : error.toString();
        }
        console.error(errMsg);
        return Observable.throw(errMsg);
    }

}

不确定我做错了什么......任何帮助都会有所帮助。我需要能够在 json 中解析以获取strat_names。

first, it loads the json

once I click on search

Answer 1

您的代码中有多个问题

1.您的数据就像{ success : { data : array} } 一样来，所以要访问您需要在下面执行的数据

  private extractData(res: any) {
    if (res && res.success && res.success.data) {
      return res.success.data;
    }
    return [];
  }

2.在您的 html 中，您需要访问这样的属性

  <ion-item *ngFor="let n of names">
    <h2>{{n?.strat_name}}</h2>
  </ion-item>

3.你的数据太多，导致数据显示延迟很多

在所有这些修复之后，它将如下所示

https://stackblitz.com/edit/ionic-jb6ni9