打字稿标识符名称不能以数字开头

Question

我一直在做一个使用这个 api 的项目：https://api.coinmarketcap.com/v1/ticker/

它是使用 angular2 构建的。此 api 返回一个字典数组，其中一个键是“24h_volume_usd”。由于名称以数字开头，因此如果我直接使用它，则打字稿不接受它。我是打字稿（和 javascript 也是）新手，因此我不知道该怎么做。

Api 结果如下所示：

[
    {
        "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"
    }, 

我的 component.ts 文件是：

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

}

对应的html文件是：

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

感谢阅读

Answer 1

应该是

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

Answer 2

肯定有效果

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