angular - 当对象属性以数值(数字)开头时，如何在 typescript html 中显示对象的数据

Question

我在 typescript 文件中有以下函数来从 API 获取数据。

.ts file

getMachineConfigsByid(id) {
    this.machinesService.getMachineConfigById(id).subscribe((res) => {
      if (res.status === 'success') {
        this.configs = res.histories;
        let data = _.groupBy(this.configs, 'config_type');
        this.led = data.led;
      } else {
        this.toastr.error(res.message, 'Error !');
      }
    }, (err) => {
      console.log(err);
    });
  }

LED阵列的数据如下所示

[
   {
      "id":37,
      "machine_id":611,
      "config_type":"led",
      "description":{
         "24v_led":true,
         "12v_led":false,
         "5v_led":false
      },
      "update_type":null,
      "created_at":"2020-02-20T14:53:04.727+05:30",
      "updated_at":"2020-02-20T14:53:04.727+05:30"
   },
   {
      "id":80,
      "machine_id":611,
      "config_type":"led",
      "description":{
         "24v_led":true,
         "12v_led":false,
         "5v_led":false
      },
      "update_type":null,
      "created_at":"2020-02-20T15:09:31.488+05:30",
      "updated_at":"2020-02-20T15:09:31.488+05:30"
   },
   {
      "id":82,
      "machine_id":611,
      "config_type":"led",
      "description":{
         "24v_led":true,
         "12v_led":false,
         "5v_led":false
      },
      "update_type":null,
      "created_at":"2020-02-20T15:17:21.896+05:30",
      "updated_at":"2020-02-20T15:17:21.896+05:30"
   },
   {
      "id":83,
      "machine_id":611,
      "config_type":"led",
      "description":{
         "24v_led":true,
         "12v_led":false,
         "5v_led":false
      },
      "update_type":null,
      "created_at":"2020-02-20T15:19:41.532+05:30",
      "updated_at":"2020-02-20T15:19:41.532+05:30"
   },
   {
      "id":84,
      "machine_id":611,
      "config_type":"led",
      "description":{
         "24v_led":true,
         "12v_led":false,
         "5v_led":false
      },
      "update_type":null,
      "created_at":"2020-02-20T15:25:55.948+05:30",
      "updated_at":"2020-02-20T15:25:55.948+05:30"
   }
]

现在在 HTML 文件中显示存储在 led 数组中的数据，如下所示。

.html

  <div *ngFor="let item of led">
    <div class="mb-4 section-header-configuration">
      <p class="mb-0"><b>LED Config</b>
        <span class="float-right">
          <p class="mb-0"><b>On : {{item?.created_at | date:'dd/MM/yyyy'}}</b></p>
        </span>
      </p>
    </div>
    <div>
      <div class="mb-3 col-12">
        <span class="mr-2 wdth-200">24 V LED:</span>
        <span class="status d-inline-block">
         {{item?.description?.24v_led ? 'Yes' : 'No' }}
        </span>
      </div>
    </div>
  </div>

但它给出了以下错误，因为它无法插入存储在以数字开头的对象内的字符串

core.js:7187 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Parser Error: Unexpected token 24, expected identifier or keyword at column 20 in [ {{item?.description?.24v_led ? 'Yes' : 'No' }} ] in ng:///MachinesModule/MachineConfigDetailsComponent.html@36:48 ("       <span class="mr-2 wdth-200">24 V LED:</span>
            <span class="status d-inline-block">[ERROR ->]
              {{item?.description?.24v_led ? 'Yes' : 'No' }}
            </span>
          </div>
"): ng:///MachinesModule/MachineConfigDetailsComponent.html@36:48
Parser Error: Unexpected token 24, expected identifier or keyword at column 20 in [ {{item?.description?.24v_led ? 'Yes' : 'No' }} ] in ng:///MachinesModule/MachineConfigDetailsComponent.html@36:48 ("
    </div>

Answer 1

您可以通过将对象视为类似数组的对象中的字符串索引来访问对象的属性。 object['value'] 相当于object.value。这称为括号表示法。

所以你可以这样做:

{{item?.description && item?.description['24v_led'] ? 'Yes' : 'No' }}

不幸的是，我认为不可能将 typescript 的可选链接与这种访问属性的方法结合起来，或者至少我无法让它在我的演示中工作。

演示:https://stackblitz.com/edit/angular-cqkbmk

编辑:

正如另一个答案所述，理论上应该可以将两者结合起来，但它在 stackblitz 中对我不起作用。但这并不是说这是不可能的。