使用 ngFor Angular 打印出 API 结果

Question

我正在尝试在我的网络面板中打印 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>

class 为 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;
});

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

Answer 1

我假设数据已显示 json 响应。然后，您需要对 HTML、

进行以下更改

<div *ngFor="let subject of lstresult.result.subjects" class=" col-lg-4">

Answer 2

1_ 您的回复已作为 json 从 API 返回。无需 json 管道

2_ngFor 正在尝试访问 lstresult 对象中的数据，但它不能访问，因为数据尚未加载。所以使用 async 管道而不是 json.

Answer 3

我认为您应该在 ngFor 中使用异步管道，因为您的 json 结果是可观察的，因此 ngFor 必须等待结果。处理此问题的更简单方法是使用 ngIf 来检查比 ngFor 高一级的结果。

使用 ngFor Angular 打印出 API 结果

Printing out API result with ngFor Angular

json

angular

typescript

api

ngfor