Wann Funktion aufrufen, die Breite der Elemente berechnet?

Question

In meinem eckigen Projekt habe ich zwei Tabellen. Eine der Tabellen wird mit Daten aus einem Service geladen, und bei ngOnInit werden diese Daten zurückgegeben.

Ich berechne die Breite der Kopfzeilenspalten und wende sie an eine andere Tabelle an. Und ich rufe this.resizeColumn() Funktion auf:

ngAfterViewInit() { 
this.resizeColumns();  
} 

Und auch auf:

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

Das Problem ist, dass, wenn die Seite zum ersten Mal geöffnet wird, die Breiten, die berechnet werden werden noch nicht angewendet. Sobald ich das Fenster verkleinere, stimmen die beiden Header überein. Die Idee ist, dass, wenn sich die Tabellenbreite ändert, diese Funktion auch aufgerufen werden soll. Nach welchem ​​Event oder Lifecycle-Hook sollte ich resizeColumn aufrufen, so dass anfänglich beide Tabellen die gleiche Spaltenbreite haben?

Answer 1

Sie können die Eigenschaftenbindung nutzen, um die Spaltenbreiten der beiden Tabellen zu verknüpfen, wie in this plunker gezeigt. In meinem Beispiel werden die Spaltenbreiten in der oberen Tabelle in regelmäßigen Abständen erhöht, und die Spaltenbreiten in der unteren Tabelle folgen mit der Eigenschaftenbindung.

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

Update:

Wenn Sie die Änderung asynchron vornehmen müssen (eine Winkel Ausnahme zu vermeiden), können Sie den folgenden Code versuchen (implementiert in this plunker). Es ruft setTimeout auf, um die neue Breite nach dem aktuellen Ausführungszyklus zu erhalten.

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]; 
}