angular - 在对象对特定属性具有“真”的情况下，将角度数组的长度加倍的简单方法？

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，而不是在模板中执行此操作。我建议你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;
  }
}