如何使用Angular2中的ngFor在空間可用時渲染元素

我正在創建一個Angular 2組件來顯示標籤（如問題中的StackOverflow所示）。但在我的情況下，我只有有限的空間來顯示標籤，因爲我只能使用一行。如果有更多標籤無法顯示，我想用一個數字來表示它們，顯示有多少標籤未被看到。如何使用Angular2中的ngFor在空間可用時渲染元素

例如，

如果有足夠的空間 - [蘋果] [芒果]

如果不是 - [蘋果] [芒果] [香蕉] [+ 3]

有沒有一種方法可以使用自定義管道（使用ngFor）來執行此操作？

目前，我正在使用ngFor呈現所有標記，並使用css flex將它們放置在一行中。

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

來源

2017-02-25 charith.arumapperuma

這肯定是可行的，如果你關心長度的字符數。如果您對單個字符的實際渲染寬度感興趣，則會更加複雜。 – jonrsharpe

不幸的是我需要用實際的元素寬度進行計算。目前我正在嘗試使用element.offsetWidth計算組件init（ngOnInit）中的寬度。但是，子元素寬度在此時不可用。 –

我

上來就是，手動檢查元件邊界框的頂部位置在AfrerViewInit生命週期鉤和刪除元素，直到兩個第一和最後一個元素匹配的頂部值的溶液。

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(); 
    } 
}

來源

2017-02-26 14:25:00

如何使用Angular2中的ngFor在空間可用時渲染元素

回答

相關問題