Angular2でngForを使用して要素をレンダリングする方法

Question

タグを表示するAngular 2コンポーネントを作成しています（質問のStackOverflowに表示されているようなものです）。しかし私のシナリオでは、タグを表示するスペースが限られています。なぜなら、私は1つの行しか使用できないからです。表示できないタグがさらにある場合は、表示されていないタグの数を示す数字を使用してそれらのタグを示す必要があります。例えば

、

十分なスペースがある場合 - [アップル] [マンゴー]

ない場合 - [アップル] [マンゴー] [バナナ] [+ 3]

は、

これを行うためにカスタムパイプ（ngForを使用）を使用する方法はありますか？

現時点では、すべてのタグをngForを使用してレンダリングし、css flexを使用して1行に配置しています。

<div 
    *ngFor="let tag of tags" 
    class="tag" 
    [ngClass]="'tag--' + tag.type"> 
    {{tag.value}} 
</div> 

Answer 1

ソリューション私は手動でAfrerViewInitライフサイクルフックの要素のバウンディングボックスの上部位置を確認し、両方の最初と最後の要素の試合の上部値までの要素を削除し、ISを思いつきました。

ngAfterViewInit() { 
    this.hidden = 0; 
    let children: Element[] = this.elementRef.nativeElement.getElementsByClassName('wrapper')[0].children; 
    let topOfFirst = children[0].getBoundingClientRect().top; 
    let topOfLast; 
    for (let i = children.length - 2; i > 0; i--) { 
    topOfLast = children[children.length - 1].getBoundingClientRect().top; 
    if (topOfLast > topOfFirst) { 
     children[i].remove(); 
     this.hidden++; 
    } 
    } 

    // remove counter if hidden count is 0 
    if (this.hidden === 0) { 
    topOfLast = children[children.length - 1].remove(); 
    } 
}