根据 angular todo 应用程序中的 objects 属性更新数组的计数

Question

我正在制作一个具有 Angular 粗鲁功能的 todos 应用程序来学习 angular6 在页脚链接下方有待完成的待办事项计数器 当前每次添加和删除待办事项时都会进行计数器更新，但是在检查时以及待办事项完成时，我不想计入剩余的待办事项。 我试图找到一种方法，但我不能。 任何帮助将不胜感激 谢谢 以下是stackblitz中的项目链接： stackblitz.com/edit/angular-kxjnyh

Answer 1

您的实现非常接近您正在尝试做的事情。你有方法

public getLength(){
    this.todoService.lengthTodos();
 }

从服务中读取待办事项长度。您只需要从服务类返回值。进行以下更改，并在 html 中使用此功能。

  public getLength(){
    return this.allTodos.filter(todo => !todo.completed).length;
  }

页脚组件的html变化

<span class="todo-count"><strong>{{getLength()}}</strong> item left</span>

这是工作副本 - https://stackblitz.com/edit/angular-zqvxxb