Question

在我的角度项目中，我有两张桌子。其中一个表加载了来自服务的数据，并且在ngOnInit上返回此数据。

我正在计算标题列宽度并将其应用于另一个表。我在on：

上调用this.resizeColumn（）函数

  ngAfterViewInit() {
this.resizeColumns();    
 }

还有：

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

问题是，当第一次打开页面时，尚未应用计算的宽度。一旦我调整窗口大小，那么两个标头匹配。这个想法是，每当表格宽度改变时，也要调用此函数。在我应该调用resizeColumn的什么事件或生命周期钩子之后，最初两个表的列宽是否相同？

Answer 1

您可以利用属性绑定来链接两个表的列宽，如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;
}

的更新

如果您需要异步更改（以避免Angular异常），您可以尝试以下代码（在 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]; }

何时调用计算元素宽度的函数？

1 个答案: