Question

我正在开发一个Angular项目，当前正在尝试在屏幕上使用尖括号{{like.this}}显示一些数据。我有一个列表列表（这是我制作的一个类），其中每个项目都有一个项目列表。一个项目具有布尔“完成”。我想在屏幕上将列表中未完成的项目显示为数字。因此，我在List类中创建了一个如下所示的函数：

  public getUnfinishedItemsNumber(): number {
    let returnValue = 0;
    for (const item of this.items) {
      if (!item.done) {
        returnValue = returnValue + 1;
      }
    }
    return returnValue;
  }

我尝试使用以下html代码调用该函数：

    <ul class="list-group list-group-hover">
      <div *ngFor="let l of lists">
        <li (click)="goToList(l.id)" class="list-group-item d-flex justify-content-between align-items-center">
          <b>{{l.name}}</b>
          <span class="badge badge-primary badge-pill">{{l.getUnfinishedItemsNumber()}}</span>
        </li>
      </div>
    </ul>

{{l.name}}可以工作，但是当我尝试使用双括号调用该函数时，它给了我这个错误：

ERROR TypeError: _v.context.$implicit.getUnfinishedItemsNumber is not a function
    at Object.eval [as updateRenderer] (HomeComponent.html:9)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:23937)
    at checkAndUpdateView (core.js:23312)
    at callViewAction (core.js:23548)
    at execEmbeddedViewsAction (core.js:23511)
    at checkAndUpdateView (core.js:23308)
    at callViewAction (core.js:23548)
    at execComponentViewsAction (core.js:23490)
    at checkAndUpdateView (core.js:23313)
    at callViewAction (core.js:23548)

当我硬编码5而不是调用函数时，它可以工作。当我执行{{l.id}}而不是调用函数时，它将起作用。但是，当我像这样在List类中添加新属性时：public test = 5;并且我尝试调用该属性而不是函数，它不起作用，但没有错误。所有其他属性都起作用。需要注意的是，有效的属性是由api调用填充的属性。

我不明白为什么该功能不起作用。

Answer 1

表示该函数未与Lists数组中的listObjects绑定。最好调用{{getUnfinishedItemsNumber(l)}}之类的函数并执行该函数内部的逻辑。

Angular如何修复TypeError：getUnfinishedItemsNumber不是函数？

1 个答案: