離子文本區域值不是自動高度

Question

我正在使用Ionic 3，並且正在使用數據庫來獲取文本區域值。 我嘗試做一個大的段落來將我的文本區域高度設置為自動，但是它不起作用。 它總是溢出，因此增加了滾動。 我該怎么做呢？

這是我的代碼

html

<div *ngIf="timeLineItems.get(postID)['POSTTYPE'] == '9'" [style.backgroundColor]="timeLineItems.get(postID)['TEXTTHEME']">
  <ion-textarea id="postBackground" [(ngModel)]="timeLineItems.get(postID)['MESSAGE']" readonly></ion-textarea>
</div>

的CSS

#postBackground {
  width: calc(100%);
  border: 0;
  height: auto;
  border-radius: 0;
  font-size: 2rem;
  color: white;
  padding: 100px 10px 100px 10px;
}

我的問題

Answer 1

如果只想顯示文本，則可以僅使用div標簽代替只讀的ion-textarea 。

Answer 2

將(keypress)添加到ion-textarea ： (keypress)="setHeight(this)

<div *ngIf="timeLineItems.get(postID)['POSTTYPE'] == '9'" [style.backgroundColor]="timeLineItems.get(postID)['TEXTTHEME']">
  <ion-textarea id="postBackground" [(ngModel)]="timeLineItems.get(postID)['MESSAGE']" readonly (keypress)="setHeight(this)"></ion-textarea>
</div>

並在TS中添加功能：

setHeight(this) {
    this.style.height = this.scrollHeight + 'px';
}

對您的評論：

我的問題是即時獲取數據庫中的數據。 我不使用keyinput

當您在輸入中獲取數據集並發送給函數時，可以通過其class/id獲取元素，而不是使用this

例如：

ngOnInit(): void {
//get from db and set in input then:
 setHeight();
}
setHeight() {
   document.getElementByClassName('input').style.height =  document.getElementByClassName('input').scrollHeight + 'px';
    }

Answer 3

將數據加載到文本區域后放置

$("textarea").height( $("textarea")[0].scrollHeight );

Answer 4

最終我解決了問題。@ Ron Nabuurs提出了一個主意。

<div id="postBackground" [textContent]="timeLineItems.get(postID)['MESSAGE']" ></div>

我刪除了文本區域，並將[(ngModel)]替換為[textContent]