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

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

我正在计算标题列的宽度并将其应用于另一个表。 我在上调用这个.resizeColumn（）函数：

  ngAfterViewInit() {
this.resizeColumns();    
 }

以及：

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

问题是，当第一次打开页面时，计算的宽度尚未应用。 一旦我调整了窗口的大小，两个标题就会匹配。 其思想是，每当表格宽度改变时，也可以调用此函数。

---

在什么事件或生命周期挂钩之后，我应该调用resizeColumn，以便最初两个表具有相同的列宽？

您可以利用属性绑定链接两个表的列宽，如中所示。在我的示例中，顶部表格中的列宽以固定的间隔增加，底部表格的列宽跟随属性绑定

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

更新：

如果需要使更改异步（以避免角度异常），可以尝试以下代码（在中实现）。它调用

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

private coldwiths:Array=[0,0,0]；
public getColWidth（行：HTMLTableRowElement，索引：number）：number{
让宽度=行。单元格[索引]。偏移网络宽度；
if（数学绝对值（该冷宽[指数]-宽度）>0.001）{
设置超时（（）=>{
这个.colWidths[索引]=宽度；
}, 0);
}
返回这个.colWidths[索引]；
}

尽管对我来说这似乎不是完全重复的问题，但请看一下这个问题以及对已接受答案的评论，谢谢。我确实读过了，只是尝试了与公认答案相同的代码。但这并不能解决我的问题。因为只要我调整窗口大小，表头就会得到值。我一直在尝试实现这样的东西：但是正如您所看到的，fiddle没有这个问题，因为它有JS。我不知道如何在角度上做同样的事情，所以程序一运行，它就采用这些宽度。在这种情况下，让我们试着找出问题所在。因此，当你打开页面时，在代码中，宽度是否已经正确计算，但没有应用它们，或者在你调整大小之前它们不可用？非常感谢！宽度是存在的，但问题是：当我刷新页面（或第一次打开）时，表首先是空的，然后被填满。因此，标题获取表格开头的宽度。现在，在填充表之后，源列的宽度明显改变了。但在我调整窗口大小之前，这些更改不会应用于目标标题。当调整表的大小以调用函数时，是否有方法侦听？因此，每当原始表更改宽度时，都会调用计算函数，但我正在使用属性绑定更改列的宽度。问题是原始列标题根据内容获取其宽度。当您第一次启动应用程序时，表在一瞬间没有数据（目标列获取原始列的列宽），然后表获取数据，原始列的列宽将扩展。目标列保持不变。我试图理解的是，当原始表列发生更改时，如何让目标列更改其宽度。我使用@ViewChildren获取本机元素tooI将我的函数更改为：我不确定如何更改表以启动计算并获取宽度。在我的示例中，表2中的宽度与表1中的实际宽度相关联（使用

offsetWidth

测量）。如果表1中的宽度改变以适应其内容，则在属性绑定的帮助下，表2中的宽度将随之改变。我在表1中显示了内容更改的结果。请注意，使用此属性绑定，您不需要监视事件，也不必知道第一个表中的宽度何时更改。角度变化检测机制为您解决了这个问题。非常感谢您！！！！但是我很难理解：那么您使用getColWidth（index:number）来获取表列的宽度？然后使用属性绑定将其绑定到表中的列？this.row.cells[index].offsetWidth，这条线怎么知道宽度？或者是由get row（）返回的

this.row

？所以我需要做的是得到带有ViewChildren的行，然后让它们的宽度为offsetWidth？很抱歉，我只是想确保我理解清楚。我简化了我的答案，并将表引用变量直接传递到模板标记中的

getColWidth（）

。注意：模板引用变量

table1Row

在plunker的代码中也与

@ViewChild（）

一起使用，但仅用于增加示例中列的大小。您不需要在代码中这样做。

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