Les noms d'identifiant dactylographiés ne peuvent pas commencer par des chiffres angulaires, dactylographiés

J'ai fait un projet qui utilise cette api: https://api.coinmarketcap.com/v1/ticker/

Il est construit en utilisant angular2. Cette api renvoie un tableau de dictionnaires dont une clé est "24h_volume_usd". Comme le nom commence par un nombre, il n'est pas accepté en dactylographie si je l'utilise directement. Je suis nouveau sur dactylographié (et javascript aussi) donc je ne peux pas comprendre comment le faire.

Le résultat de l'API ressemble à ceci:

[
{
"id": "bitcoin",
"name": "Bitcoin",
"symbol": "BTC",
"rank": "1",
"price_usd": "9292.8",
"price_btc": "1.0",
"24h_volume_usd": "7830770000.0", <----- This key-value pair
"market_cap_usd": "158006054554",
"available_supply": "17003062.0",
"total_supply": "17003062.0",
"max_supply": "21000000.0",
"percent_change_1h": "1.77",
"percent_change_24h": "0.04",
"percent_change_7d": "5.46",
"last_updated": "1524906276"
},

Mon fichier component.ts est:

import { Component, OnInit } from "@angular/core";
import { CrypdataService } from "../crypdata.service"

@Component({
selector: "app-table",
templateUrl: "./table.component.html",
styleUrls: ["./table.component.css"],
providers: [CrypdataService],
})
export class TableComponent implements OnInit {

private currency=[];

constructor( private crypdataservice: CrypdataService ) { }

ngOnInit() {
this.crypdataservice.getall().subscribe(data => this.currency = data);
}

}

Et le fichier html correspondant est:

<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Symbol</th>
<th scope="col">Market Cap</th>
<th scope="col">Price (USD)</th>
<th scope="col">Price (BTC)</th>
<th scope="col">Circulating Supply</th>
<th scope="col">Volume (24h)</th>
<th scope="col">% 1h</th>
<th scope="col">% 24h</th>
<th scope="col">% 7d</th>
</tr>
</thead>
<tbody>


<tr *ngFor="let curr of currency">
<th scope="row">{{ curr.rank }}</th>
<td>{{curr.name}}</td>
<td>{{curr.symbol}}</td>
<td>{{curr.market_cap_usd}}</td>
<td>{{curr.price_usd}}</td>
<td>{{curr.price_btc}} </td>
<td>{{curr.available_supply}} </td>
<td>{{curr.24h_volume_usd}} </td>    // does not work
<td>{{curr.percent_change_1h}} </td>
<td>{{curr.percent_change_24h}}</td>
<td>{{curr.percent_change_7d}} </td>

</tr>

</tbody>
</table>
</div>

Merci d'avoir lu

Réponses:

devrait être

<td>{{curr["24h_volume_usd"]}} </td>

C'est vraiment du travail

<div class="table-responsive">
<table class="table table-striped table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Symbol</th>
<th scope="col">Market Cap</th>
<th scope="col">Price (USD)</th>
<th scope="col">Price (BTC)</th>
<th scope="col">Circulating Supply</th>
<th scope="col">Volume (24h)</th>
<th scope="col">% 1h</th>
<th scope="col">% 24h</th>
<th scope="col">% 7d</th>
</tr>
</thead>
<tbody>


<tr *ngFor="let curr of currency">
<th scope="row">{{ curr.rank }}</th>
<td>{{curr.name}}</td>
<td>{{curr.symbol}}</td>
<td>{{curr.market_cap_usd}}</td>
<td>{{curr.price_usd}}</td>
<td>{{curr.price_btc}} </td>
<td>{{curr.available_supply}} </td>
<td>{{curr["24h_volume_usd"]}} </td>    // it"s work
<td>{{curr.percent_change_1h}} </td>
<td>{{curr.percent_change_24h}}</td>
<td>{{curr.percent_change_7d}} </td>

</tr>

</tbody>
</table>
</div>