Json 使用ngFor Angular打印API结果

我正在尝试在我的web面板中打印json响应。当我尝试显示完整响应时，它可以完美地工作，但随后我尝试使用NGF，因为我在浏览器中得到了这些错误：

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

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

---

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

我假设数据显示了json响应。然后，您需要对HTML进行以下更改

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

---

1\uAPI已将您的响应作为json返回。无需

json

pipe

---

2_ngFor正在尝试访问

lstreult

对象中的数据，但由于数据尚未加载，因此无法访问。因此，使用

async

pipe而不是

json

我认为您应该在ngFor中使用async pipe，因为您的json结果是可观察的，所以ngFor必须等待结果。处理此问题的一个简单方法是使用ngIf检查比ngFor高一级的结果。

为什么要将

json

管道与

ngFor

一起使用？如何填写

lstreult

？cna您是否为其添加了

.ts

代码？@micronyks我已经添加了编码，您是否可以尝试用异步替换json？谢谢您的帮助，您的解决方案不起作用，但它让我思考。我需要使用以下代码并将类中对象的名称从“subject”更改为“subjects”，我不知道；我不明白你为什么把

.result

放在

lstreult.result.subjects

？@micronyks我想他错过了result对象，答案是{result:{subjects:[…]}。只需点击浏览器中的API；）糟糕的是，我没有将json响应粘贴到应该是“result”的位置：在front@tymon.zarski不要在公共论坛上公开你的API或完整的回复。我完全同意第一点，但是现在有了第二点，因为不需要管道，这是为了帮助你