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 ]

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

2 个答案: