将 angular 数组的绑定长度加倍的简单方法，其中对象具有特定属性的 'true'？

Question

我有以下学生名单：

students = [{name:'Jordan', passed:true}, {name:'Kyle'},{name:'Jess'},
            {name:'Sam', passed:true}
           ]

我希望能够在 HTML 模板中获取学生通过的数组的长度。

通常我会这样做：

<div>
    {{students.length}}
</div>

但是，我想要类似这样的伪代码...

<div>
    {{total length of students who passed}}
</div>

我想这样做，如果我在页面上有其他修改学生的按钮，这样当我更改学生是否通过时，模板将自动反映正确的学生人数。

我该怎么做？

Answer 1

您不能在 angular 模板中执行此操作，请尝试使用组件 class 中的 Pipe 或 invoking a method 而不是在模板中执行此操作。我向你建议 Pipes.

在模板中：

<div>
    {{ queryArray() }}
</div>

在组件中：

queryArray() {
   return this.students.filter(c => c.passed).length;
}

对于管道

在html中：

<div>{{students | myLengthFilter:'passed' }}</div>

管道中class:

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

@Pipe({
  name: 'myLengthFilter'
})
export class MyLengthFilterPipe implements PipeTransform {

  transform(items: any[], field: string): any {
    if (!items || !field) {
      return items;
    }
    // filter items array, items which match and return true will be
    // kept, false will be filtered out
    return items.filter(c => c[field]).length;
  }
}

将 angular 数组的绑定长度加倍的简单方法，其中对象具有特定属性的 'true'？

Easy way to double bind length of angular array where object has 'true' for a specific property?

angular

angular-arrays

将 angular 数组的绑定长度加倍的简单方法，其中对象具有特定 属性 的 'true'？

Easy way to double bind length of angular array where object has 'true' for a specific property?

angular

angular-arrays

将 angular 数组的绑定长度加倍的简单方法，其中对象具有特定属性的 'true'？