Angular 无法检索我的cardTiles变量中的值

我有一个变量cardTiles在我的angular 9组件中

我已经将变量定义为

cardTitles:Product[] = [];

产品定义如下

export class Product{
productName: string;}

当我输入console.logthis.cardTiles时，2我得到下面的屏幕截图，即未定义的第一个控制台日志条目：

我已尝试访问cardTiles var中的项目，但无法访问

我试过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;
  }
}

---

提前谢谢。

您无法访问它，因为您还有未定义的，您应该这样做：

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

---

能否添加组件和模板代码？请显示赋值和打印值的位置。@MichaelD我在构造函数方法中赋值。并在OnInit方法中显示。@Prince，我已经添加了代码。你的错误是你认为如果你调用了承包商，你已经在OnInit中拥有了它。这不是它的工作原理。您可以获取它，因为您仍然没有尝试访问的此数组。我希望能够在其他位置访问此.cardTitles的内容。从您的回答来看，这就像在构造函数方法中插入console.log一样简单，而我一直在避免这样做。请参考我的问题，我可以访问this.cardTitles的值，但不能访问我放入数组的内容的内部值。好的，我想我理解您的主要问题，您将数组放入数组？尝试这样做：this.cardTitles=[…this.cardTitles，…results[payload]；而不是this.cardTitles.pushresults[payload]；