角度 - 根据内容的长度调整双向绑定输入元素的高度

Question

我想将输入文本的高度调整为其文本内容。当用户通过触发(input)事件来填充内容时，我可以很容易地实现这一点，该事件调用我的adjustHeight函数，该函数使用scrollHeight更新输入元素的高度。

下面的代码示例：

<textarea #myLabel
(input)="adjustHeight(myLabel)"
[(ngModel)]="labelValue">
</textarea>

adjustHeight(element: HTMLElement) {
element.style.height = "5px";
element.style.height = (element.scrollHeight)+"px";
}

当用户填充输入元素时，这很好，，但当输入文本使用已填充的labelValue(来自API响应(呈现时，文本区域的高度不会动态更改，因为不会触发(输入(事件。

我尝试使用(ngModelChange)事件，但它似乎没有被触发。是否有任何其他事件可以绑定到输入元素，以在渲染时照顾其高度？提前感谢

Answer 1

模板：

<textarea #myLabel
[style.height]="getHeight(myLabel)" 
[(ngModel)]="labelValue">
</textarea>

打字脚本：

public getHeight(element: HTMLElement): string {
return element.scrollHeight + 'px';
}

这样，只要有必要，样式就会改变。

Answer 2

尝试先将labelValue初始化为'(当您声明它时(，然后按照现在应该做的方式分配它的值。