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