ion-textarea 在 Ionic 5 中动态调整高度

Question

我正在将我的项目从 Ionc3 迁移到 Ionic5。我有一个 ion-textarea，它会随着用户键入而增加高度，并且它在 Ionic3 中有效。以下是代码。

HTML 页数：

<ion-textarea #hvUserPost type="text" (input)="adjustDesc()"></ion-textarea>

TS 页面：

@ViewChild('hvUserPost') hvUserPost: ElementRef;
adjustDesc() {
    let textArea;
    textArea = this.hvUserPost['_elementRef'].nativeElement.getElementsByClassName("text-input")[0];
    textArea.style.overflow = 'hidden';
    textArea.style.height = 'auto';
    var scrollHeight = textArea.scrollHeight;
    textArea.style.height = scrollHeight + 'px';
}

现在在 Ionic4 中唯一的变化是在下面的声明中

@ViewChild('hvUserPost', {static: false}) hvUserPost: ElementRef;

在 Ionic4 中，出现以下错误。

ERROR TypeError: Cannot read property 'nativeElement' of undefined

所以this.hvUserPost['_elementRef']是未定义的，this.hvUserPost.nativeElement也是未定义的。

Answer 1

只需添加 autoGrow="true" 属性即可。

<ion-textarea #hvUserPost type="text"autoGrow="true" (input)="adjustDesc()"></ion-textarea>

ion-textarea 在 Ionic 5 中动态调整高度

ion-textarea resize height dynamically in Ionic 5

html

ionic-framework

ionic5

elementref