Почему не выводятся поля объектов из массива?

Question

[tn-ko]

Я получаю огромный массив объектов, в котором хранятся другие массивы. Нахожу нужный массив и пушу его в переменную public metering_devices: MeteringDevice[];.

public metering_devices: MeteringDevice[];
getDevices(access_token: any){
    this.userService.listOfDevices(access_token).subscribe({
     next: (response: any) =>{
      this.metering_devices =  response.data.metering_devices.data;

При выводе в консоли показывается весь массив, но вывести его на ХТМЛ-странице не получается через

<code lang="javascript">
<div *ngFor="let metering_device of metering_devices" class="col-md-6 col-xl-3">
     <label for="name">Name</label>
     <p> {{metering_device?.last_active}}</p>
      <p>{{metering_device?.id}}</p>
      <p>{{metering_device?.name}}</p>
</div>
</code>

Answer 1

[Ghoulll]

1. Обычно для выведения переменных в шаблон используют observable или subject’ы.
2. Есть и другой вариант в подписке вызывать _cdr.detectChanges(). https://angular.io/api/core/ChangeDetectorRef

Comments

[tn-ko]

Я использую observable для получения объекта, в котором мне нужно найти массив через

public listOfDevices(access_token: any): Observable<any>{
    const httpOptions = {
      headers: new HttpHeaders({
        Authorization: `Bearer ${access_token}`, 
      })
    };
  
    const postBody ={
      headers: {
        "page":1,"last_page":0,"sort_field":"id","sort":"desc","search_string":null,"device_state":"all","is_archived":false,"paginate":true,"append_fields":["active_polling","attributes","tied_point"],"per_page":10
  
      }

    }
    return this.http.post('https://core.nekta.cloud/api/device/metering_devices', postBody, httpOptions)
  }
}

[Ghoulll]

tn-ko, все верно, а потом подписываешься на него и присваиваешь значение переменной в компоненте из значения в подписке. Тут 2 решения как я написал выше

[tn-ko]

Спасибо огромное за помощь, я думал с ума сойду с этой проблемой! Нужно было в ngOnInit() вызывать сервис и выводить данные типа

<tr *ngFor="let metering_device of metering_devices ">
          <td>{{metering_device.id | json}}</td>
          <td>{{metering_device.name | json}}</td>
          <td>{{metering_device.last_active | json}}</td>
        </tr>!