Unable to retrieve the values in my cardTiles var

Question

I have a variable cardTiles in my angular 9 component.

I have defined the variable as

cardTitles:Product[] = [];

Product is defined as below

export class Product{
productName: string;}

When i console.log(this.cardTiles, "2") I get the screenshot below(ignore the first console log entry of undefined):

I have tried accessing the items in the cardTiles var but I cannot.

I have tried cardTiles[0], cardTiles["0"], cardTiles[0][0], among others so maybe am not seeing something.

MyComponent.ts is as below

import {Component, OnDestroy, OnInit} from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { ProductService } from '../products/products.service';
import { Product } from '../products/products';

interface CardSettings {
  title: string;
  iconClass: string;
  type: string;
  amount: string;
  currency1: string;
}


@Component({
  selector: 'ngx-dashboard',
  styleUrls: ['./dashboard.component.scss'],
  templateUrl: './dashboard.component.html',
})
export class DashboardComponent implements OnDestroy, OnInit {

  cardTitles:Product[] = [];
  private alive = true;

  statusCards: string;

  commonStatusCardsSet: CardSettings[] = [
  ]

  statusCardsByThemes: {
    default: CardSettings[];
  } = {
    default: this.commonStatusCardsSet,
  };

  constructor(
    private productService: ProductService,
    private themeService: NbThemeService) {

    this.themeService.getJsTheme()
      .pipe(takeWhile(() => this.alive))
      .subscribe(theme => {
        // get products
        this.productService._getProducts().subscribe(results => {

          this.cardTitles.push(results["payload"]);

        });
        //generate cards here
        this.statusCards = this.statusCardsByThemes[theme.name]; 

      });    
  }

  ngOnInit(): void {

    console.log(this.cardTitles[0].productName);
  }

  ngOnDestroy() {
    this.alive = false;
  }
}

Thank you in advance.

Answer 1

You cant access it because you still have undefined, you should do it like this:

import {Component, OnDestroy, OnInit} from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { takeWhile } from 'rxjs/operators';
import { ProductService } from '../products/products.service';
import { Product } from '../products/products';

interface CardSettings {
  title: string;
  iconClass: string;
  type: string;
  amount: string;
  currency1: string;
}


@Component({
  selector: 'ngx-dashboard',
  styleUrls: ['./dashboard.component.scss'],
  templateUrl: './dashboard.component.html',
})
export class DashboardComponent implements OnDestroy, OnInit {

  cardTitles:Product[] = [];
  private alive = true;

  statusCards: string;

  commonStatusCardsSet: CardSettings[] = [
  ]

  statusCardsByThemes: {
    default: CardSettings[];
  } = {
    default: this.commonStatusCardsSet,
  };

  constructor(
    private productService: ProductService,
    private themeService: NbThemeService) {}

  ngOnInit(): void {
   this.themeService.getJsTheme()
      .pipe(takeWhile(() => this.alive))
      .subscribe(theme => {
        // get products
        this.productService._getProducts().subscribe(results => {

          this.cardTitles.push(results["payload"]);
          // anyway what your doing here is not the best practice anyway. 
          this.onceIGetTheResult()
        });
        //generate cards here
        this.statusCards = this.statusCardsByThemes[theme.name]; 

      });    
  }

public onceIGetTheResult(): void {
    console.log(this.cardTitles[0].productName);
}

  ngOnDestroy() {
    this.alive = false;
  }
}