如何在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數組更有效？

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所要求的盡可能少的功能的解決方案。

Answer 3

@Snorkpete我一直在使用的測量性能.filter（）和。降低（）：

var t0 = performance.now();
users.reduce(function(total, u){return isSpecial(u) ? total+1 : total}, 0)
var t1 = performance.now();
console.log(t1-t0);

結果： 0.04500000000007276秒

var t0 = performance.now();
customersActivity.filter(u => isSpecial(u)? true:false).length;
var t1 = performance.now();
console.log(t1-t0);

結果： 0.09000000000014552秒

在我的測試。降低（）大約為2x倍.filter快（）