Angular JS Problème d'affichage des données

Fermé
Streamooc Messages postés 79 Date d'inscription samedi 17 juin 2017 Statut Membre Dernière intervention 8 février 2023 - 29 mars 2021 à 11:58
Bonjour,

Je désire afficher les champs name et price dans cette API ayant la structure ci-dessous. J'ai cette erreur mais je ne sais pas comment la corriger.J'ai besoin d'aide s'il vous plait:

client:159 src/app/welcome/welcome.component.html:30:19 - error TS2339: Property 'name' does not exist on type '[string, string]'.
{{ dt.name }} {{ dt.quote.USD.price}}
~~~~

src/app/welcome/welcome.component.ts:7:16
7 templateUrl: './welcome.component.html',
~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component WelcomeComponent.



{
"status": {
"timestamp": "2021-03-29T08:05:25.938Z",
"error_code": 0,
"error_message": null,
"elapsed": 31,
"credit_count": 1,
"notice": null,
"total_count": 4487
},
"data": [
{
"id": 1,
"name": "Bitcoin",
"symbol": "BTC",
"slug": "bitcoin",
"num_market_pairs": 9470,
"date_added": "2013-04-28T00:00:00.000Z",
"tags": [
"mineable",
"pow",
"sha-256",
"store-of-value",
"state-channels",
"coinbase-ventures-portfolio",
"three-arrows-capital-portfolio",
"polychain-capital-portfolio",
"binance-labs-portfolio",
"arrington-xrp-capital",
"blockchain-capital-portfolio",
"boostvc-portfolio",
"cms-holdings-portfolio",
"dcg-portfolio",
"dragonfly-capital-portfolio",
"electric-capital-portfolio",
"fabric-ventures-portfolio",
"framework-ventures",
"galaxy-digital-portfolio",
"huobi-capital",
"alameda-research-portfolio",
"a16z-portfolio",
"1confirmation-portfolio",
"winklevoss-capital",
"usv-portfolio",
"placeholder-ventures-portfolio",
"pantera-capital-portfolio",
"multicoin-capital-portfolio",
"paradigm-xzy-screener"
],
"max_supply": 21000000,
"circulating_supply": 18667550,
"total_supply": 18667550,
"platform": null,
"cmc_rank": 1,
"last_updated": "2021-03-29T08:05:02.000Z",
"quote": {
"USD": {
"price": 56146.82893716819,
"volume_24h": 48179686933.32416,
"percent_change_1h": 1.55787821,
"percent_change_24h": 0.05352651,
"percent_change_7d": -2.84840918,
"percent_change_30d": 18.61325252,
"percent_change_60d": 77.87483603,
"percent_change_90d": 112.73187795,
"market_cap": 1048123736526.034,
"last_updated": "2021-03-29T08:05:02.000Z"
}
}
},
{
"id": 1027,
"name": "Ethereum",
"symbol": "ETH",
"slug": "ethereum",
"num_market_pairs": 6088,
"date_added": "2015-08-07T00:00:00.000Z",
"tags": [
"mineable",
"pow",
"smart-contracts",
"ethereum",
"coinbase-ventures-portfolio",
"three-arrows-capital-portfolio",
"polychain-capital-portfolio",
"binance-labs-portfolio",
"arrington-xrp-capital",
"blockchain-capital-portfolio",
"boostvc-portfolio",
"cms-holdings-portfolio",
"dcg-portfolio",
"dragonfly-capital-portfolio",
"electric-capital-portfolio",
"fabric-ventures-portfolio",
"framework-ventures",
"hashkey-capital-portfolio",
"kinetic-capital",
"huobi-capital",
"alameda-research-portfolio",
"a16z-portfolio",
"1confirmation-portfolio",
"winklevoss-capital",
"usv-portfolio",
"placeholder-ventures-portfolio",
"pantera-capital-portfolio",
"multicoin-capital-portfolio",
"paradigm-xzy-screener"
],
"max_supply": null,
"circulating_supply": 115245454.249,
"total_supply": 115245454.249,
"platform": {
"id": 2502,
"name": "Heco",
"symbol": "HT",
"slug": "huobi-token",
"token_address": "0x64ff637fb478863b7468bc97d30a5bf3a428a1fd"
},
"cmc_rank": 2,
"last_updated": "2021-03-29T08:05:03.000Z",
"quote": {
"USD": {
"price": 1710.5778751544083,
"volume_24h": 17315620856.680237,
"percent_change_1h": 0.89167502,
"percent_change_24h": -0.33641036,
"percent_change_7d": -4.65356084,
"percent_change_30d": 14.39323725,
"percent_change_60d": 31.31799028,
"percent_change_90d": 140.61102257,
"market_cap": 197136324250.45898,
"last_updated": "2021-03-29T08:05:03.000Z"
}
}
},
{
"id": 1839,
"name": "Binance Coin",
"symbol": "BNB",
"slug": "binance-coin",
"num_market_pairs": 568,
"date_added": "2017-07-25T00:00:00.000Z",
"tags": [
"marketplace",
"centralized-exchange",
"payments",
"binance-smart-chain",
"alameda-research-portfolio",
"multicoin-capital-portfolio"
],
"max_supply": 170532785,
"circulating_supply": 154532785,
"total_supply": 170532785,
"platform": null,
"cmc_rank": 3,
"last_updated": "2021-03-29T08:04:10.000Z",
"quote": {
"USD": {
"price": 274.4749318865258,
"volume_24h": 2178976164.8074236,
"percent_change_1h": 2.08067061,
"percent_change_24h": -0.16186733,
"percent_change_7d": 2.92028559,
"percent_change_30d": 18.65741657,
"percent_change_60d": 547.96211371,
"percent_change_90d": 625.26158799,
"market_cap": 42415375637.11013,
"last_updated": "2021-03-29T08:04:10.000Z"
}
}
},
{
"id": 825,
"name": "Tether",
"symbol": "USDT",
"slug": "tether",
"num_market_pairs": 11475,
"date_added": "2015-02-25T00:00:00.000Z",
"tags": [
"store-of-value",
"payments",
"stablecoin",
"stablecoin-asset-backed",
"solana-ecosystem"
],
"max_supply": null,
"circulating_supply": 40477463996.729454,
"total_supply": 42446290993.53494,
"platform": {
"id": 1027,
"name": "Ethereum",
"symbol": "ETH",
"slug": "ethereum",
"token_address": "0xdac17f958d2ee523a2206206994597c13d831ec7"
},
"cmc_rank": 4,
"last_updated": "2021-03-29T08:04:10.000Z",
"quote": {
"USD": {
"price": 1.00038027560353,
"volume_24h": 68529089676.31497,
"percent_change_1h": 0.02669696,
"percent_change_24h": -0.01458652,
"percent_change_7d": -0.07047037,
"percent_change_30d": 0.07525287,
"percent_change_60d": -0.1245499,
"percent_change_90d": 0.17979489,
"market_cap": 40492856588.780174,
"last_updated": "2021-03-29T08:04:10.000Z"
}
}
},
{
"id": 2010,
"name": "Cardano",
"symbol": "ADA",
"slug": "cardano",
"num_market_pairs": 252,
"date_added": "2017-10-01T00:00:00.000Z",
"tags": [
"mineable",
"dpos",
"pos",
"platform",
"research",
"smart-contracts",
"staking",
"binance-chain"
],
"max_supply": 45000000000,
"circulating_supply": 31948309440.747814,
"total_supply": 45000000000,
"platform": null,
"cmc_rank": 5,
"last_updated": "2021-03-29T08:04:10.000Z",
"quote": {
"USD": {
"price": 1.21093351545301,
"volume_24h": 2397978054.8992276,
"percent_change_1h": 2.02956685,
"percent_change_24h": 2.02317062,
"percent_change_7d": 0.68157795,
"percent_change_30d": -8.70916336,
"percent_change_60d": 267.20939939,
"percent_change_90d": 559.66535847,
"market_cap": 38687278663.86534,
"last_updated": "2021-03-29T08:04:10.000Z"
}
}
},
{
"id": 6636,
"name": "Polkadot",
"symbol": "DOT",
"slug": "polkadot-new",
"num_market_pairs": 171,
"date_added": "2020-08-19T00:00:00.000Z",
"tags": [
"substrate",
"polkadot",
"binance-chain",
"polkadot-ecosystem",
"three-arrows-capital-portfolio",
"polychain-capital-portfolio",
"blockchain-capital-portfolio",
"boostvc-portfolio",
"cms-holdings-portfolio",
"coinfund-portfolio",
"fabric-ventures-portfolio",
"fenbushi-capital-portfolio",
"hashkey-capital-portfolio",
"kinetic-capital",
"1confirmation-portfolio",
"placeholder-ventures-portfolio",
"pantera-capital-portfolio"
],
"max_supply": null,
"circulating_supply": 924106821.3186735,
"total_supply": 1060130517.011874,
"platform": {
"id": 2502,
"name": "Heco",
"symbol": "HT",
"slug": "huobi-token",
"token_address": "0xa2c49cee16a5e5bdefde931107dc1fae9f7773e3"
},
"cmc_rank": 6,
"last_updated": "2021-03-29T08:05:07.000Z",
"quote": {
"USD": {
"price": 33.69609972873555,
"volume_24h": 1285122843.3702688,
"percent_change_1h": 3.49368567,
"percent_change_24h": 2.66027673,
"percent_change_7d": -9.25421595,
"percent_change_30d": 0.17384669,
"percent_change_60d": 105.56442935,
"percent_change_90d": 420.94986371,
"market_cap": 31138795611.15882,
"last_updated": "2021-03-29T08:05:07.000Z"
}
}
},


@Component({
selector: 'app-welcome',
templateUrl: './welcome.component.html',
styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {

data = new Map<string, string>();

constructor(
private route:ActivatedRoute,
private service:WelcomeDataService
) { }

ngOnInit(): void {
this.service.executeCoinBeanService().subscribe(
response => this.handleSuccessfulResponse(response)
);
}

handleSuccessfulResponse(response: any) {

for(let i=0; i < response['data'].length; i++){
this.data = response['data'][i];
}
}
}



export class CoinBean {
constructor(
public data: string []
) {}
}
@Injectable({
providedIn: 'root'
})
export class WelcomeDataService {
private url = environment.api_url;
constructor(
private http:HttpClient
) { }

executeCoinBeanService(){
return this.http.get<CoinBean>(this.url);
}
}


<div class="container">
<ul>
<li *ngFor="let dt of data">
{{ dt.name }} {{ dt.quote.USD.price}}
</li>
</ul>
</div>