首页 > 解决方案 > 根据 angular todo 应用程序中的 objects 属性更新数组的计数

问题描述

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

标签: arraysangularangular6counting

解决方案


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

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


推荐阅读