Javascript 角度5：从循环访问组件中的变量

我正在将一些代码从AngularJS组件移植到Angular5组件中

我将一个对象数组加载到变量

productlist

中

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

showcaselist

我在

productlist

上运行

forEach

循环，以查找满足条件的所有项目（

item.acf.product\u slide.length>0

），并将它们推到

展示列表中。然后在模板中显示这些项目

登录到控制台显示数据正在进入，并且
if
语句工作正常，但我一直收到控制台错误：
TypeError:undefined不是对象（评估“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);
      }
    });
  };
}

尝试改用箭头函数-当前函数正在创建一个指向不同对象的新
this

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

尝试改用箭头函数-当前函数正在创建一个指向不同对象的新
this

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

试试这个：

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

试试这个：

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

使用
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);
  }
}

使用
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);
  }
}

itemsWithSlides=function….
语法不正确。@Phax语法正确，只是不寻常。它没有以ES6样式声明方法，而是为该属性名分配一个函数。我仍在习惯ES6/TS。
itemsWithSlides=function….
语法不正确。@Phax语法正确，只是不寻常。它没有以ES6样式声明方法，而是为该属性名分配一个函数。我还在习惯ES6/TS。谢谢。箭头函数对我来说是新的。不过我想这和“这个”有关。谢谢。箭头函数对我来说是新的。不过我觉得这和“这个”有关。这太棒了。我不知道
filter（）
函数。那是ES6吗？是的！使用
.map（）
、
.reduce（）
和
.filter（）
，您可以为
循环删除大部分
。太棒了。我不知道
filter（）
函数。那是ES6吗？是的！使用
.map（）
、
.reduce（）
和
.filter（）
，您可以为
循环删除大部分
。