Question

我的component.ts中具有此功能，该功能显示列数据的总和（在这种情况下为权重）：

getTotalWeight(){
    return ELEMENT_DATA.map(t => t.weight).reduce((acc, value) => acc + value, 0);
  }

在我的component.html中，我有类似的东西可以调用该函数来显示总重量：

<p>Total weight: {{getTotalWeight()}}</p>

数据确实显示正确，但是在我的控制台中，我看到以下错误：

ERROR TypeError: Cannot read property 'map' of undefined
    at CashPlannerComponent.getTotalAvailableAmount (cash-planner.component.ts:134)
    at Object.eval [as updateRenderer] (CashPlannerComponent.html:145)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:45293)
    at checkAndUpdateView (core.js:44276)
    at callViewAction (core.js:44636)
    at execComponentViewsAction (core.js:44564)
    at checkAndUpdateView (core.js:44277)
    at callViewAction (core.js:44636)
    at execEmbeddedViewsAction (core.js:44593)
    at checkAndUpdateView (core.js:44271)

我试图在stackblitz上重现该错误，但该错误未出现在stackblitz上。我无法直接共享源代码，因为它是公司应用程序。 DEMO类似于我在公司应用程序上所做的操作。

错误中的CashPlannerComponent.getTotalAvailableAmount()函数是我公司应用程序中的函数，其用法与getTotalWeight()相同，如上所示。

知道总列数据显示正确吗，是什么在我的控制台中产生此错误？

*已更新：

在我的实际源代码中，我是从调用API得到的数组中映射的：

  getPayment() {
    this.paymentService.getPayment(this.currentAccount.accountId).subscribe(
      (data: Payment[]) => {
        this.paymentList = data;
        this.dataSource.data = this.paymentList;
        this.isLoading = false;
      },
      error => {
        this.alertService.error('Could not retrieve the data requested');
      }
    );
  }

，然后使用Array.map()来获取要显示在我的html上的总和，虽然工作正常，但在控制台上收到了上述错误：

getTotalAvailableAmount() {
    return this.paymentList.map(x => x.amount).reduce((acc, value) => acc + value, 0);
  }

Answer 1

TL;灾难恢复

确保使用空值初始化paymentList。即

public paymentList : <type>[] = [];

为什么我的代码不起作用？

由于JS是异步的，因此它不等待任何IO请求完成。相反，它将继续执行下一行代码。

由于您正在从service获取值，因此在service返回数据之前先初始化视图。那时paymentList的值为undefined，因为您可能尚未初始化它。

Answer 2

正如@programoholic所提到的，问题出在异步代码上。在您的堆叠闪电中，它是有效的，因为数据是静态的。为了解决这个问题，我创建了一个stackblitz，在1000ms之后我要为其赋值。要解决此问题，请使用一个空数组设置初始值

public paymentList : <type>[] = [];

数据正确显示，但控制台显示“无法读取未定义的属性'map'”

2 个答案: