如何在Angular 2 - HTML中绑定另一个元素的宽度？

Question

我有一个输入框和一个表格。

<input type="search"/>
<table id="myTable"/>

我该如何将输入框的宽度与表格的宽度绑定呢？类似这样做吗？

<input type="search" [style.width]="#myTable.width"/>

- alansiqueira27

Answer 1

输入标签中的引用应该是针对 <table> 的模板变量，而不是 id。在表达式中使用时，# 是不必要的。您还需要检索 offsetWidth 而不是 width：

<input [ngStyle]="{'width.px': myTable.offsetWidth }">
<table #myTable>...</table>

在上述代码中，表格标签的宽度将与输入框的宽度相匹配。 演示

- Vega

---

在寻找一种固定表头和页脚的方法后，这个解决方案真是救了我的一天。 - HDs Sergiu

我正在苦思冥想Angular，使用JavaScript创建了一些带有固定页眉和页脚的表格，并具有宽度过渡和绑定到元素滚动的位置。现在我试图用Angular实现这个，你有什么建议吗？我的当前问题是这样的：我需要将一个绝对定位的页眉左右滚动以跟随父元素的滚动位置，你知道任何方法可以做到吗？我猜可以用@hostlistener，但我不知道如何捕捉滚动元素。 - HDs Sergiu

@HDsSergiu，没有代码和确切的上下文，很难回答，但据我所理解，可以使用hostlistener。将其放在父级上，并使用句柄（模板变量或typescript中的Viewchild）获取标题。或者，如果您将hostlistener放在标题上，请注意文档滚动。 - Vega

Answer 2

你也可以使用[style.width.px]

<input [style.width.px]="{'width.px': myTable.offsetWidth }">
<table #myTable>...</table>

- Adam