时间戳

首页 > 解决方案 > 使用 ngFor Angular 打印出 API 结果

json - 使用 ngFor Angular 打印出 API 结果

问题描述

我正在尝试在我的网络面板中打印 json 响应。当我尝试显示完整响应时，它可以完美运行，但随后我尝试使用 ngFor，我在浏览器中收到了这些错误：

ERROR TypeError: Cannot read property 'getContext' of null

ERROR TypeError: Cannot read property 'result' of undefined

这是我尝试使用的一种方法：

 <div *ngFor="let subject of lstresult.result.subject | json " class=" col-lg-4">
  <div class=" card card-chart">
    <div class=" card-header">
      <h5 class=" card-category">Completed Tasks</h5>
      <span>{{ subject | json }}</span>
      <br /><br />
    </div>
    <div class=" card-body">

    </div>
  </div>
</div>

为 API 准备的类如下所示：

   export interface VatAPI {
      result: EntityResponse;
    }
    
    export interface EntityResponse {
      subject: Entity[];
      requestDateTime: string;
      requestId: string;
    }
    
    export interface Entity {
      authorizedClerks: EntityPerson[];
      regon: string;
      workingAddress: string;
      hasVirtualAccounts: boolean;
      statusVat: string;
      krs: string;
      restorationBasis: string;
      accountNumbers: string[];
      registrationDenialBasis: string;
      representatives: EntityPerson[];
      residenceAddress: string;
      registrationDenialDate: Date;
      restorationDate: Date;
      name: string;
      registrationLegalDate: Date;
      removalBasis: string;
      removalDate: Date;
      nip: string;
      partners: EntityPerson[];
      pesel: string;
    }
    
    export interface EntityPerson {
      firstName: string;
      lastName: string;
      nip: string;
      companyName: string;
    }

API 请求如下所示：

export class ApiService {
  constructor(private httpclient: HttpClient) {}
  getcomments(): Observable<any> {
    return this.httpclient.get(
      "https://wl-api.mf.gov.pl/api/search/nips/5213003700,6151001756?date=2020-07-27"
    );
  }
}

对于某些上下文，完整示例响应如下所示：

"result" : { "subjects": [ { "name": "ARTUR PIKOR, EWA PIKOR SKLEP \"MERCEDES\" AUTO SERWIS S.C.", "nip": "6151001756", "statusVat": "Czynny", "regon": "230180142", "pesel": null, "krs": null, "residenceAddress": null, "workingAddress": "LUBAŃSKA 5, 59-903 ZGORZELEC", "representatives": [], "authorizedClerks": [], "partners": [], "registrationLegalDate": "1994-12-29", "registrationDenialBasis": null, "registrationDenialDate": null, "restorationBasis": null, "restorationDate": null, "removalBasis": null, "removalDate": null, "accountNumbers": [ "75109019680000000106202838" ], "hasVirtualAccounts": false }, { "name": "FUNDACJA WIELKA ORKIESTRA ŚWIĄTECZNEJ POMOCY", "nip": "5213003700", "statusVat": "Zwolniony", "regon": "010168068", "pesel": null, "krs": "0000030897", "residenceAddress": null, "workingAddress": "DOMINIKAŃSKA 19C, 02-738 WARSZAWA", "representatives": [], "authorizedClerks": [], "partners": [], "registrationLegalDate": "2004-04-19", "registrationDenialBasis": null, "registrationDenialDate": null, "restorationBasis": null, "restorationDate": null, "removalBasis": null, "removalDate": null, "accountNumbers": [ "79114010100000524444001001", "14114010100000524444001007", "56114010100000524444001027", "29114010100000524444001028", "29124011121111001000177255" ], "hasVirtualAccounts": true } ], "requestDateTime": "08-08-2020 19:25:11", "requestId": "1khm1-88d50kn" }

component.ts 代码：

this.ApiService.getcomments().subscribe((data) => {
  this.lstresult = data;
});

也许这是一个初学者的错误，但我无法解决这个问题；）

标签： jsonangulartypescriptapingfor

解决方案

1_ 您的响应已从 API 以 json 格式返回。无需json管道

2_ngFor 正在尝试访问lstresult对象内部的数据，但由于数据尚未加载而无法访问。所以使用asyncpipe 而不是json.

推荐阅读