Angular 返回 BMI 大于 30 的管道

Question

我想要一个管道，用于 return 数组中大于 30 的项数。JSON 数组如下所示：

bmis = [
    {
        "bmi": 34.32
    },
    {
        "bmi": 23.75
    },
    {
        "bmi": 19.06
    },
    {
        "bmi": 18.69
    },
    {
        "bmi": 45.40
    },
    {
        "bmi": 37.64
    },
    {
        "bmi": 35.54
    }
]

请注意，这些 bmi 值是用于测试结果的假值。

然后我的bmi管道如下：

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

@Pipe({
    name: 'bmi'
})
export class BmiPipe implements PipeTransform {
    transform(items: any[], attr: string): any {
        let counter = 0;
        for (let i = 0; i < items.length; i++) {
            if (items[i] >= 30.0) {
                counter++;
            }
        }
        return counter;
    }
}

最后，我的模板如下所示：{{ bmis | bmi }}

为了节省空间，我没有包含组件代码。此外，管道在 app.module 文件中注册。此管道不 return 4 这是正确的结果。实际上。 return没什么。

我不确定管道代码的正确性。但我就是看不到缺失的部分。如有任何帮助，我们将不胜感激！

Answer 1

您的代码将 bmis 数组视为其值是数字，但它们实际上是对象。所以，改变这个：

if (items[i] >= 30.0) {
    counter++;
}

收件人：

if (items[i].bmi >= 30.0) {
    counter++;
}

Angular 返回 BMI 大于 30 的管道

Angular pipe for returning BMI more than 30

typescript

angular-pipe

angular