Angular遍历对象数组统计account-status非complete的元素数量

数据老陈

2026-9-24

实现方案

核心统计逻辑

所有开发场景的底层判断逻辑通用，两种实现方式可选：

用filter过滤后统计长度，写法更直观：

// 假设你的对象数组名为accountApplications
const pendingCount = accountApplications.filter(item => 
  item['account-status'] !== 'complete'
).length
// 按钮显隐判断条件
const showTargetButton = pendingCount > 20

用reduce直接统计，无需生成中间数组，数据量大时性能更优：

const pendingCount = accountApplications.reduce((count, item) => {
  return item['account-status'] !== 'complete' ? count + 1 : count
}, 0)
const showTargetButton = pendingCount > 20

不同开发场景使用示例

原生JS场景

直接通过判断条件控制DOM显隐：

const targetBtn = document.querySelector('#按钮的ID')
targetBtn.style.display = showTargetButton ? 'block' : 'none'

Vue场景

把判断逻辑放到计算属性里，模板用指令控制显隐：

// 计算属性
computed: {
  showTargetButton() {
    return this.accountApplications.filter(item => 
      item['account-status'] !== 'complete'
    ).length > 20
  }
}

<!-- 模板部分 -->
<button v-show="showTargetButton">目标按钮</button>

React场景

用useMemo缓存计算结果避免重复计算，渲染时判断是否显示按钮：

const showTargetButton = useMemo(() => {
  return accountApplications.filter(item => 
    item['account-status'] !== 'complete'
  ).length > 20
}, [accountApplications])

// 渲染部分
{ showTargetButton && <button>目标按钮</button> }