离子文本区域值不是自动高度

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得到了一个想法。

@Override public void start(Stage primaryStage) { double w = 10.5; double h = 10.5; Pane pane = new Pane(); for (int i = 0; i < 57; i++) { for (int j = 0; j < 57; j++) { double x = Math.floor(i * w); double y = Math.floor(j * h); double nx = Math.floor((i + 1) * w); double ny = Math.floor((j + 1) * h); // double x = i * w; // double y = j * h; // double nx = (i + 1) * w; // double ny = (j + 1) * h; Rectangle rect = new Rectangle(x, y, nx - x, ny - y); rect.setFill(Color.BLACK); pane.getChildren().add(rect); } } primaryStage.setScene(new Scene(pane, 600, 600)); primaryStage.show(); }

我删除了文本区域，并将<div id="postBackground" [textContent]="timeLineItems.get(postID)['MESSAGE']" ></div>替换为[(ngModel)]