angular - 双倍绑定(bind) 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>

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

我该怎么做？

Answer 1

您无法在 Angular 模板中执行此操作，请尝试使用Pipe或从组件的类中调用方法，而不是在模板内执行此操作。我向您推荐管道。

在模板中:

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