angular 5: array.length returning undefined in console but data are printed

I am successfully getting values from my local APIs(laravel) and it is also storing data in variables which is also showing in views but when I tried to get the length or read it for calculating number of live and idle devices, etc. it is returning 0(in case of length) and undefined (while accessing its properties).. Below are my codes. What am I doing wrong and what can be the solution?

my dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { UserDevices } from '../../interfaces/user-devices';
import { LiveRecord } from '../../interfaces/live-record';
import { HistoryRecord } from '../../interfaces/history-record';
import { Timestamp } from 'rxjs';
import { LiveRecordModule } from '../../models/live-record/live-record.module';
import { LiveRecords } from '../../models/LiveRecords';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  user_id: number;
  token: string;
  myDevices: number[]=[];
  myLiveRecords: LiveRecord[] = [];
  myHistoryRecords: HistoryRecord[] = [];

  runningDevices: number[] =[];
  idleDevices: number[] = [];
  stoppedDevices: number[] =[];
  inactiveDevices: number[] =[];
  devicesWithNoData: number[] =[];

  constructor(private httpClient : HttpClient) { }

  ngOnInit() {
    this.user_id = +localStorage.getItem('id');
    this.token = localStorage.getItem('token');
    this.getMyDevices(this.user_id);
    console.log(this.myDevices);                        //working

    console.log(this.myLiveRecords);                    //working
    console.log(this.myHistoryRecords);                 //working

    console.log(this.myLiveRecords.length);             // 0
    console.log(this.myLiveRecords[0].deviceId);        // Error

    this.myLiveRecords.forEach(record=>{                // not working
      console.log("record found: " + record.deviceId);
    });
    for(let record in this.myLiveRecords){              // not working
      console.log(record);
    }
  }

  getMyDevices(user_id:number){
    let promise = new Promise((resolve, reject) => {
      this.httpClient.get<number[]>("http://localhost:8000/api/getMyDevices/"+this.user_id+"?token="+this.token)
        .toPromise()
        .then(
          res => { // Success
            for(let i=0; i<res.length;i++){
              this.myDevices.push(res[i]);
              this.httpClient.get<LiveRecord>("http://localhost:8000/api/getDeviceLiveRecord/"+res[i]+"?token="+this.token)
              .toPromise()
              .then(
                res => { // Success
                  if(res!=null)
                    this.myLiveRecords.push(res[0]);
                  else
                    this.myLiveRecords.push(null);
                  //console.log(res);
                  resolve();
                },
                msg => { // Error
                reject(msg);
                }
              );
              this.httpClient.get<HistoryRecord>("http://localhost:8000/api/getDeviceHistoryRecord/"+res[i]+"?token="+this.token)
              .toPromise()
              .then(
                res => { // Success
                  if(res !=null)
                    this.myHistoryRecords.push(res[0]);
                  else
                    this.myHistoryRecords.push(null);
                  //console.log(res);
                  resolve();
                },
                msg => { // Error
                reject(msg);
                }
              );
            }
            resolve();
          },
          msg => { // Error
          reject(msg);
          }
        );
    });
    return promise;    
  }
}

my dashboard.component.html

<div class="deviceInfo">
    <div class="row">
        <div class="col-md-2" style="background:green; height:50px">
            <span>Running</span>
        </div>
        <div class="col-md-2" style="background:yellow; height:50px">
            <span>Idle</span>
        </div>
        <div class="col-md-2" style="background:red; height:50px">
            <span>Stopped</span>
        </div>
        <div class="col-md-2" style="background:grey; height:50px">
            <span>Inactive</span>
        </div>
        <div class="col-md-2" style="background:black; height:50px">
            <span>No Data</span>
            <p>{{devicesWithNoData.length}}</p>
        </div>
    </div>
</div>
<div class="row">
    <table>
        <thead>
            <td>S.N</td>
            <td>DeviceID</td>
            <td>Last Live</td>
        </thead>
        <tbody>
            <tr *ngFor="let live of myLiveRecords;let i =index">
                <td>{{i+1}}</td>
                <td>{{live?.deviceId?live.deviceId:myDevices[i]}}</td>
                <td>{{live?.recordDate?live.recordDate:"No Data"}}</td>
            </tr>

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

and this is what i get in browser output with console