我有以下学生名单:
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)正确的学生人数。
我该怎么做?
最佳答案
您无法在 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;
}
}
关于angular - 双倍绑定(bind) Angular 数组长度的简单方法,其中对象的特定属性为 'true'?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49620285/