对于特定属性,对象具有"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

您无法在角度模板中执行此操作,尝试使用Pipe或invoking a method从Component的类中而不是在模板内执行此操作.我建议你Pipes.

在模板中:

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

在组件中:

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

对于管道

在html中:

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

在管道类中:

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;
  }
}