angular - TypeScript HTML'de nesne özelliği sayısal bir değerle (rakamla) başladığında nesne verisi nasıl görüntülenir

API'den veri almak için TypeScript dosyasında aşağıdaki işleve sahibim.

.ts dosyası

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 dizisinin verileri böyle görünüyor

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

Şimdi bu LED dizisinde saklanan veriler HTML dosyasında aşağıdaki şekilde görüntüleniyor.

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

ama bu, bir rakamla başlayan nesne içinde saklanan dizeyi enterpolasyon yapamadığı için aşağıdaki hatayı veriyor

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>

Cevap #1

Bir nesnenin özelliklerine, onu dizi benzeri bir nesnedeki bir string indeks gibi düşünerek erişebilirsiniz. object['value'], object.value ile eşdeğerdir. Bu, köşeli parantez gösterimi olarak bilinir.

Yani şunu yapabilirsin:

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

Ne yazık ki, bence TypeScript'in isteğe bağlı zincirleme özelliğini bu özelliklere erişim yöntemiyle birleştirmek mümkün değil, ya da en azından ben bunu demomda çalıştıramadım.

DEMO: https://stackblitz.com/edit/angular-cqkbmk

Düzenle :

Diğer cevapta belirtildiği gibi, teorik olarak ikisini birleştirmek mümkün olmalı, ama benim için Stackblitz'te çalışmıyor. Yine de bunun mümkün olmadığını söylemek değil.

İlgili makaleler