Question

我有一个Answer Entities数组，其结构包含Vthumbs数组。

可以具有布尔值vthumbdown / vthumbup属性的实体。

问题是这样的：如何计算Vthumbs数组中具有真正的“ vthumbdown”元素的数量（以及具有虚假的“ vthumbup”元素的数量）？

  {
    "accepted": true,
    "creationDate": "2018-12-21T15:42:34.497Z",
    "id": 0,
    "urlvanser": "string",
    "userId": 0,
    "vquestionId": 0,
    "vthumbs": [
      {
        "creationDate": "2018-12-21T15:42:34.497Z",
        "id": 0,
        "userId": 0,
        "vanswerId": 0,
        "vquestionId": 0,
        "vthumbdown": true,
        "vthumbup": true
      }
    ]
  }
]

我可以使用{{vanswer.vthumbs.length}}看到商品总数，但我不认为如何获取起伏次数

Answer 1

这里是javascript数组及其在MDN上可用方法的很好的参考。在这种情况下，您很可能希望按如下方式使用filter method。

vanswer.vthumbs.filter(vthumb => vthumb.vthumbdown).length;
vanswer.vthumbs.filter(vthumb => vthumb.vthumbup).length;

Answer 2

您可以简单地通过过滤数组来获得此信息：

const ups = vanswer.vthumbs.filter(v => v.vthumbup).length;
const downs= vanswer.vthumbs.filter(v => v.vthumbdown).length;

然后在您的模板中使用它：

Ups: {{ ups }}
Downs: {{ downs }}

编辑：根据评论，您想在模板中计算这些内容。为此，您可以构建一个简单的管道：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'countThumbs'
})
export class CounterPipe implements PipeTransform {
  transform(obj: any, upsOrDowns = 'ups'): any {
    if (!obj.vthumbs || !Array.isArray(obj.vthumbs)) {
      return null;
    }
    if (upsOrDowns === 'ups') {
      return obj.vthumbs.filter(item => item.vthumbup).length;
    } else {
      return obj.vthumbs.filter(item => item.vthumbdown).length
    }
  }
}

然后您可以像这样在模板中使用它：

Thumbups: {{ vanswer | countThumbs:'ups' }}
Thumbdowns: {{ vanswer | countThumbs:'downs' }}

在Stackblitz，这是一种更通用的方法。

如何根据值对数组中的元素进行计数

2 个答案: