如何计算 Angular2 中的 dom 元素

Question

我想知道是否有一种简单的方法可以使用Angular 2来计算 dom 元素。例如具有以下代码：

    <div *ngFor="let user of users" [ngClass]="{'special': isSpecial(user)}">
        {{ user.name }}
    </div>

有没有一种简单的方法可以在不创建管道或函数的情况下获取包含特殊类的总行数？

使用 Jquery 就像运行一样简单：

$( ".special" ).length;

Answer 1

您可以使用普通的 DOM API 来完成您之前通过 jQuery 完成的工作，例如：

document.querySelectorAll('.special').length

然而，除非 isSpecial(user) 函数运行起来非常昂贵，否则为什么查询 DOM 会比在代码中过滤用户数组更高效？

users.filter(u => isSpecial(u)).length

我警告不要过度担心这种情况下的性能，而无需先实际运行一些性能测试来验证您的假设。

Answer 2

不知道为什么有人对这个问题投了反对票+1

你可以做这样的事情..

<div #wrapper>
    <div *ngFor="let user of users" [ngClass]="{'special': isSpecial()}">
        {{ user.name }}
    </div>
<div>

现在使用组件类中的@ViewChild注释访问#wrapper。

然后最后..

ngAfterViewInit() {
    let numSpecials = $(viewChildEl).find('.special').length;
}

并不是说这是最好的解决方案，但它是一个尝试按照OP的要求引入尽可能少的功能的解决方案。