如何統計Angular2中的dom元素

我想知道是否有一種簡單的方法來使用Angular 2來統計dom元素。例如具有下面的代碼：如何統計Angular2中的dom元素

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

有一種簡單的方法來獲得包含特殊類，而無需創建管道或功能行的總數？

與jQuery這將是跑步一樣容易：

$(".special").length;

來源

2017-03-03 Ander

爲什麼你不只是得到你的用戶數組長度TS文件快約2倍倍？ – zszep

因爲這樣你才能得到整個列表的長度，而不僅僅是特殊類標記的元素。（我編輯了這個問題，我使用了一個錯誤的ngClass例子） – Ander

你有沒有考慮過使用'filter'？或'.map'？ –

不知道爲什麼有人downvoted這個問題+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的要求引入儘可能少的功能，於可能的解決方案。

來源

2017-03-04 02:35:18 danday74

如果沒有安裝jQuery，它可以開箱即用嗎？ – Ander

Angular1內置了jQuery Lite - 但我認爲Angular2不會 - 你將需要引入jQuery - 但是你的wud問題需要反正，因爲很多libs都依賴於它 - 所有最好:) – danday74

PS Ive問了這個問題這裏澄清.. http://stackoverflow.com/questions/42592180/does-angular2-have-jquery-built-in – danday74

您可以使用正常的DOM API做什麼，你會通過jQuery如之前已做過：

document.querySelector('.special').length

但是，除非isSpecial（用戶）功能是運行極其昂貴的，爲什麼會查詢DOM除了在代碼中過濾用戶數組還有更高性能嗎？

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

我會告誡不要擔心在這種情況下的表現太不實際運行一些性能測試首先要驗證你的假設。

來源

2017-03-04 20:46:35 snorkpete

@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秒

在我的測試。降低（）比.filter（）

來源

2017-03-05 22:46:57 Ander

如何統計Angular2中的dom元素

回答

相關問題