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

Question

我正在将一些代码从 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);
      }
    });
  };
}

Answer 1

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

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

Answer 2

试试这个：

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

Answer 3

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

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

Angular 5: accessing variable in component from loop

javascript

typescript

angular-components

angular