访问Angular的API

Question

我正在尝试第一次使用API​​。这是我当前称其为：

url = 'https://data.economie.gouv.fr/api/records/1.0/search/?dataset=prix-carburants-fichier-instantane-test-ods-copie&q=aire+sur+l%27adour&lang=fr&facet=id&facet=adresse&facet=ville&facet=prix_maj&facet=prix_nom&facet=com_arm_name&facet=epci_name&facet=dep_name&facet=reg_name&facet=services_service&facet=horaires_automate_24_24&refine.ville=Aire-sur-l%27Adour';
datas = [];

constructor(private http: HttpClient){
  this.http.get(this.url).toPromise().then((data: any) => {
    this.datas = data
  })
}

和html：

<pre class="text-white">
{{ datas | json }}
</pre>

结果显示这样的json：

现在，如何我可以访问吗？我已经尝试了类似的事情：

let data of datas :

data.records
data[0][records]
etc

Answer 1

这里是一个示例，其中JSON属性纠缠了您的整个对象：

 <span *ngFor="let element of json.records">
    {{element.datasetid }}
    {{element.geometry }}
    {{element.recordid }}
 </span>

Answer 2

在这里，请尝试创建一种新方法并使用异步/等待。

创建一个类似的新方法 -

public async getData()
  {
     await this.http.get(this.URL)
    .toPromise()
    .then(response => this.datas = response['records'])
    .catch(err => { console.log ('error');
    });
  }

现在，您可以从构造函数上调用此方法类似的内容 -

constructor(private http: HttpClient) {
 this.getData()
  }

现在，您应该使用 *ngfor指令在数据群上迭代，因为它是一个数组，因此您可以使用此数据来开发HTML。

<div *ngFor="let data of datas">
  {{data?.fields?.id}}
</div>

这样，您可以使用此。
让我知道您是否需要进一步的帮助。

请找到stackblitz-- https：// stackblitz.com/edit/angular-dukmlc?file=src/app/app.component.ts

谢谢。