如何从循环内的函数返回对象列表

Question

我正在尝试遍历视图列表，并且每个视图使用服务调用检索与该视图关联的对象列表。每个视图都被分配了最后一次调用函数的结果，而不是函数调用带有参数的结果。

在服务层方法中调试输出语句表明它正在获取正确的值。在循环更新视图以使用该调用的结果后，向该方法添加调用。

我在Angular2中经历过编程，我之前从未遇到过这个问题，但我看不出我在做什么不同。似乎视图属性被赋予功能而不是功能结果。

搜索问题表明这是一个关闭问题，但我无法获得任何传统的解决方案。

这就是我所拥有的：

views.forEach((view: PeriodSummaryView) => {
  view.CategorySummaries = API.getCategorySummariesByPeriod(view.Period, new Date()); // every view is given the result of the last evaluation of this function
  view.TotalSpent = this.sumAmounts('Spent', view.CategorySummaries);
  view.TotalBudgeted = this.sumAmounts('Budgeted', view.CategorySummaries);
});

和API层：

export default class API {

    static getCategorySummariesByPeriod(filterPeriod: Period, filterDate: Date): CategorySummary[] {
        var self = this;

        let summaries: CategorySummary[] = Categories.slice();

        summaries.forEach((category: CategorySummary) => {
            category.Spent = Expenses.filter(function (e) {
                return e.CategoryId == category.CategoryId
                    && self.isDateInPeriod(filterPeriod, filterDate, e.Date)
            }).reduce(function (acc, e) {
                return acc + e.Cost;
            }, 0);
        });

        return summaries;
    }

}

预期：每个视图都应该有自己的CategorySummaries列表，使用其参数从API方法中获取。

实际：所有视图都具有相同的列表;上次调用API方法的结果。

注意：正确计算TotalSpent和TotalBudgeted。

Answer 1

forEach函数不会修改原始数组。您必须创建一个新的空数组并将每个计算项目推送到新数组并返回它。

export default class API {

    static getCategorySummariesByPeriod(filterPeriod: Period, filterDate: Date): CategorySummary[] {
        var self = this;

        let summaries: CategorySummary[] = Categories.slice();
        let new_arr = [];

        summaries.forEach((category: CategorySummary) => {
            category.Spent = Expenses.filter(function (e) {
                return e.CategoryId == category.CategoryId
                    && self.isDateInPeriod(filterPeriod, filterDate, e.Date)
            }).reduce(function (acc, e) {
                return acc + e.Cost;
            }, 0);
            new_arr.push(category);
        });

        return new_arr;
    }

}

Answer 2

看起来你可能想尝试使用.map方法而不是.forEach。提供的函数回调的返回值将用于创建新数组。 TypeScript中的示例：

const oddNumbers = [1, 3, 5, 7, 9]
let evenNumbers = oddNumbers.map((oddNumber: number) => {
    return oddNumber + 1;
});
// evenNumbers = [2, 4, 6, 8, 10]
// oddNumbers  = [1, 3, 5, 7, 9 ]