要素の幅を計算する関数を呼び出すタイミングは？

Question

私の角張ったプロジェクトでは、私は2つのテーブルを持っています。 テーブルの1つにサービスからのデータがロードされ、ngOnInitでこのデータが返されます。

私はヘッダー列の幅を計算し、別の表に適用しています。 そして、私は上this.resizeColumn（）関数を呼び出します。

上

ngAfterViewInit() { 
this.resizeColumns();  
} 

も：

@HostListener('window:resize') 
onResize() { 
this.resizeColumns(); 
} 

問題は、ページが初めて開かれたときに、幅がそれが計算されていること、ですまだ適用されていません。 ウィンドウのサイズを変更すると、2つのヘッダーが一致します。 テーブルの幅が変わるたびに、この関数も呼び出されるという考えがあります。 最初に両方のテーブルの列幅が同じになるように、どのイベントまたはライフサイクルフックをresizeColumnを呼び出す必要がありますか？

Answer 1

プロパティバインドを利用して、2つのテーブルの列幅をリンクすることができます（this plunker）。私の例では、トップテーブルのカラム幅は一定の間隔で増加し、ボトムテーブルのカラム幅はプロパティバインディングに従って続きます。

<table> 
    <tr #table1Row> 
    <td>Column 1</td> 
    <td>Column 2</td> 
    <td>Column 3</td> 
    <tr> 
</table> 

<table> 
    <tr> 
    <td [style.width.px]="getColWidth(table1Row, 0)">Column 1</td> 
    <td [style.width.px]="getColWidth(table1Row, 1)">Column 2</td> 
    <td [style.width.px]="getColWidth(table1Row, 2)">Column 3</td> 
    <tr> 
</table> 

// Get the column width from Table 1 
public getColWidth(row: HTMLTableRowElement, index: number): number { 
    return row.cells[index].offsetWidth; 
} 

更新：あなたは（角度例外を回避するために）変更を非同期に行うために必要がある場合は、次のコードを試すことができます

（this plunkerに実装）。 setTimeoutを呼び出して、現在の実行サイクルの後に新しい幅を取得します。

private colWidths: Array<number> = [ 0, 0, 0 ]; 

public getColWidth(row: HTMLTableRowElement, index: number): number { 
    let width = row.cells[index].offsetWidth; 
    if (Math.abs(this.colWidths[index] - width) > 0.001) { 
    setTimeout(() => { 
     this.colWidths[index] = width; 
    }, 0); 
    } 
    return this.colWidths[index]; 
}