[英]Angular 6 API JSON ngFor Not Showing
I am working on a project using Angular 6 for the first time, and I am creating an application that gets JSON data from an online URL, listing each entry on a HTML page. 我正在第一次使用Angular 6开发一个项目,并且正在创建一个应用程序,该应用程序从在线URL获取JSON数据,并列出HTML页面上的每个条目。 Each entry has a variable key value, paired with an array of variables. 每个条目都有一个变量键值,并与变量数组配对。 The problem is that, despite not showing any errors, the *ngFor statement does not show any of the entries, yet the {{ jsonData | 问题是,尽管未显示任何错误,但* ngFor语句未显示任何条目,但{{jsonData | json }} shows that the data is returned successfully. json}}显示数据已成功返回。 Here is my code. 这是我的代码。
api-retrieval-service.ts api-retrieval-service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpResponse} from '@angular/common/http';
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
import { CoinListing } from './coinListing';
@Injectable({
providedIn: 'root'
})
export class ApiRetrievalService {
constructor(private _http: HttpClient) { }
coinList() {
return this._http.get('https://min-api.cryptocompare.com/data/all/coinlist').pipe(catchError(this.errorHandler));
}
errorHandler(error: HttpErrorResponse) {
return throwError(error);
}
}
coinlist.component.ts coinlist.component.ts
import { Component, OnInit } from '@angular/core';
import { ApiRetrievalService } from '../api-retrieval.service';
import { CoinListing } from '../coinListing';
@Component({
selector: 'app-coinlist',
templateUrl: './coinlist.component.html',
styles: []
})
export class CoinlistComponent implements OnInit {
title = 'Coin Listing';
public _jsonData:CoinListing[] = [];
constructor(private _apiRetrieval: ApiRetrievalService) { }
ngOnInit() {
this._apiRetrieval.coinList()
.subscribe(
result => {
this._jsonData = result.Data;
console.log('Success', result.Data);
},
error => this.errorMsg = error.statusText
);
}
}
coinListing.ts coinListing.ts
export interface CoinListing {
[key:string]: {
Algorithm: string;
BuiltOn: string;
CoinName: string;
FullName: string;
FullyPremined: string;
Id: string;
ImageUrl: string;
IsTrading: string;
Name: string;
PreMinedValue: string;
ProofType: string;
SmartContractAddress: string;
SortOrder: string;
Sponsored: string;
Symbol: string;
TotalCoinSupply: string;
TotalCoinsFreeFloat: string;
Url: string;
}
};
coinlist.component.html coinlist.component.html
<div style="text-align:center">
<h1>
{{ title }}
</h1>
</div>
<br/>
<p *ngFor="let coin of _jsonData">
Found {{ coin }}
</p>
Anyone know what is stopping the CoinListings from being displayed via *ngFor? 有谁知道通过* ngFor阻止CoinListings的显示吗? Or how I can show each CoinListing's variables in the HTML page, given their structure? 还是给定结构,如何在HTML页面中显示每个CoinListing的变量?
If I understand this correctly, "Each entry has a variable key value, paired with an array of variables" then coins is an object or array. 如果我正确理解这一点,“每个条目都有一个变量键值,并与变量数组配对”,那么钱币就是一个对象或数组。 If that is the case then 如果是这样的话
Found {{ coin }}
will not return a value. 不会返回值。 You would need to call a variable from inside coin. 您需要从硬币内部调用变量。 For example if 'title' was a key inside of coin then you could do 例如,如果“ title”是硬币内的钥匙,那么您可以
Found {{ coin.title }}
You need to bind the properties or use the json pipe the {{_jsonData | json}}
您需要绑定属性或使用json管道 {{_jsonData | json}}
{{_jsonData | json}}
is working because you are telling the binding to give it that structure with the json pipe {{_jsonData | json}}
之所以有效,是因为您要告诉绑定使用json管道赋予该结构
To learn more about JSON pipes: https://angular.io/api/common/JsonPipe 要了解有关JSON管道的更多信息: https : //angular.io/api/common/JsonPipe
You can do this: 你可以这样做:
<p *ngFor="let coin of _jsonData">
Found {{ coin | json }}
<p>
or binding each property you want to show 或绑定要显示的每个属性
<p *ngFor="let coin of _jsonData">
Found:
{{ coin.Algorithm }}
{{ coin.BuiltOn }}
.
.
.
{{ coin.Url }}
<p>
UPDATE: Based on the structure of your object 更新:基于对象的结构
<div *ngFor="let coin of objectKeys(_jsonData)">
{{_jsonData[coin] | json}}
</div>
In your ts file: 在您的ts文件中:
objectKeys(obj) {
return Object.keys(obj);
}
You need to use property like below 您需要使用如下所示的属性
<p *ngFor="let coin of _jsonData">
Found {{ coin.Title }}
</p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.