Невозможно получить значения в моей карточке

Question

У меня есть переменная cardTiles в моем angular 9 компоненте.

Я определил переменную как

cardTitles:Product[] = [];

Продукт определен следующим образом

export class Product{
productName: string;}

Когда я console.log (this.cardTiles, "2") I получите скриншот ниже (игнорируйте первую запись в журнале консоли undefined):

Я попытался получить доступ к элементам в var cardTiles, но не могу.

Я пробовал cardTiles [0], cardTiles ["0"], cardTiles [0] [0] и другие, поэтому, возможно, я что-то не вижу.

MyComponent.ts как показано ниже

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;
  }
}

Заранее спасибо.

Answer 1

Вы не можете получить к нему доступ, потому что у вас все еще есть undefined, вы должны сделать это так:

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;
  }
}