以 5 角调整 TextArea 的大小答案

【问题标题】：ResizeTextArea in angular 5以 5 角调整 TextArea 的大小
【发布时间】：2018-11-18 14:53:36
【问题描述】：

我是 Angular 的新手。我想让 textarea 自动调整大小，就像在这种情况下 https://www.primefaces.org/primeng/#/inputtextarea 一样。我尝试了不同的方法，但在 Angular 5 上没有任何效果。

这段代码显示了我最初的 textarea 版本。

<div class="form-group" contenteditable="true">
    <label for="description">Description</label>
    <textarea type="text" class="form-control" id="description" [(ngModel)]="dish.description" #description="ngModel" name="description" required></textarea>
    <div [hidden]="description.valid || description.pristine" class="alert alert-danger">Description can't be empty</div>
</div>

感谢您的帮助，谢谢。

【问题讨论】：

标签： angular typescript textarea angular5 autoresize

【解决方案1】：

终于找到解决办法了

  autogrow() { 
    let textArea = document.getElementById("description") 
    textArea.style.overflow = 'hidden'; 
    textArea.style.height = 'auto'; 
    textArea.style.height = textArea.scrollHeight + 'px'; 
}

在 HTML 中：

<textarea style="resize:vertical" (keyup)="autogrow()" rows="3" (click)="autogrow()" type="text" class="form-control" id="description" [(ngModel)]="myprivateObject.description" #description="ngModel" name="description" required></textarea>

【讨论】：

【解决方案2】：

您可能不需要编写自己的指令或事件处理程序。您可以使用官方 Angular CDK 中的cdkTextareaAutosize。

https://material.angular.io/components/input/overview#auto-resizing-code-lt-textarea-gt-code-elements

【讨论】：

谢谢。也许你是对的。那是在 2018 年。我没有找到解决方案。也许现在事情发生了变化
@Patrick 你不需要材料，只需要 CDK。它们是独立的模块。