typescript Ionic 3 如何使用 textarea ngModel 和默认值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47330808/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic 3 how to use textarea ngModel and default value?
提问by Amelie Perrin
I am new in ionic and have a problem with textarea. This is my code:
我是 ionic 新手，对 textarea 有问题。这是我的代码：
<textarea [(ngModel)]="userData.aboutme" name="" id="" cols="30" rows="20"
value="{{ about_me}}" style="width:100%; padding: 10px; margin-top: 3px;" >
</textarea>
The problem is that the value is not showing inside textarea. It's show only if i remove the [(ngModel)].
I need help for this thanks a lot
问题是该值未显示在 textarea 内。仅当我删除[(ngModel)]. 我需要帮助，非常感谢
回答by Sampath
You need to use ion-textarea.
您需要使用ion-textarea.
Note:This is just an example.Adjust it as you wish.
注意：这只是一个例子。根据需要调整它。
Working stackblitz
工作堆栈闪电战
html
html
<ion-item>
<ion-textarea placeholder="Tap here"
[(ngModel)]="note" name="note" autocomplete="on" autocorrect="on"></ion-textarea>
</ion-item>
.ts
.ts
note: string = "My Default Text";
constructor(public navCtrl: NavController) {
}
回答by Moses Mwicigi
on ion-textarea on .html
在 .html 上的 ion-textarea 上
<ion-item>
<ion-label floating>Content</ion-label>
<ion-textarea #myInput id="myInput" rows="1" maxLength="500"
(keyup)="adjust()" [(ngModel)]="text.content"></ion-textarea>
</ion-item>
On.ts File,
On.ts 文件，
import { Directive, HostListener, ElementRef } from '@angular/core';
@IonicPage()
@Component({
selector: 'page-post-text',
templateUrl: 'post-text.html',
})
@Directive({
selector: 'ion-textarea[autosize]' // Attribute selector,
})
export class PostTextPage {
@HostListener('document:keydown.enter', ['$event'])
onKeydownHandler(evt: KeyboardEvent) {
this.adjust()
}
Text = {} as Text;
constructor(public element:ElementRef) {}
ngAfterViewInit(){
this.adjust()
}
adjust():void {
let textArea =
this.element.nativeElement.getElementsByTagName('textarea')[0];
textArea.style.overflow = 'hidden';
textArea.style.height = 'auto';
textArea.style.height = (textArea.scrollHeight + 32) + "px";
}
}
And you are good to go!
你很高兴去！
