Angular 5:从循环中访问组件中的变量

时间:2018-01-26 19:06:23

标签: javascript angular typescript angular-components

我将一些代码从AngularJS组件移植到Angular 5组件中。

我有一个加载到变量productlist中的对象数组。

在我的旧控制器中,我创建了第二个变量作为空数组showcaselist

我在forEach上运行productlist循环,找到符合条件的所有项目(item.acf.product_slide.length > 0)并将其推送到showcaselist。然后我在模板中显示这些项目。

登录到控制台显示数据正在进入,if语句有效,但我一直收到控制台错误: TypeError: undefined is not an object (evaluating 'this.showcaselist')

以下是整个组件:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';


@Component({
  selector: 'pb-ds-showcaseindex',
  templateUrl: './showcaseindex.component.html'
})
export class ShowcaseindexComponent implements OnInit {

  productlist;
  showcaselist = [];

  constructor(private _route: ActivatedRoute) { }


  ngOnInit() {
    this.productlist = this._route.snapshot.data.showcases;
    this.itemsWithSlides();

  }

  itemsWithSlides = function () {
    this.productlist.forEach(function (item) {
      if (item.acf.product_slide.length > 0) {
        this.showcaselist.push(item);
      }
    });
  };
}

3 个答案:

答案 0 :(得分:2)

您可以使用filter()函数

缩短整个过程
export class ShowcaseindexComponent implements OnInit {
  productlist;
  showcaselist = [];

  constructor(private _route: ActivatedRoute) { }


  ngOnInit() {
    this.productlist = this._route.snapshot.data.showcases;
    this.showcaseList = this.productList.filter(item => item.acf.product_slide.length > 0);
  }
}

答案 1 :(得分:1)

试试这个:

ngOnInit() {
    this.productlist = this._route.snapshot.data.showcases;
    this.itemsWithSlides(this.productList);
  }

private itemsWithSlides(productList) {
  if (productList) {
    productList.forEach(item => {
      if (item && item.acf.product_slide.length > 0) {
        this.showcaseList.push(item);
      }
    });
  }
}

答案 2 :(得分:0)

尝试使用箭头功能 - 当前功能正在创建一个引用不同对象的新this

  itemsWithSlides = () => {
    this.productlist.forEach((item) => {
      if (item.acf.product_slide.length > 0) {
        this.showcaselist.push(item);
      }
    });
  };