ngModel for textarea无法在angular2中工作
我正尝试使用ngModel在textarea中打印json对象。
我做了以下事情：
<textarea style="background-color:black;color:white;" [(ngModel)]='rapidPage' rows="30" cols="120">
</textarea>
我想在textarea中加载json对象。 上面的代码是在textarea中加载rapidPage对象，但是它将textarea的值显示为[object Object] 。
目的：
this.rapidPage = {
"pageRows": [
{
"sections": [
{
"sectionRows": [
{
"secRowColumns": [
]
},
{
"secRowColumns": [
{
"colName": "users"
}
]
},
{
"secRowColumns": [
{
"colName": "sample"
}
]
}
],
"width": 0
}
]
}
],
"pageName": "DefaultPage",
"pageLayout": "DEFAULT_LAYOUT",
"editMode": true
};
我想以字符串的形式加载数据。 任何投入？
假设您想要按照rapidPage绑定rapidPage ，并且只会在textArea中写入有效的JSON。
PARSE ，并在STRINGIFY显示时进行STRINGIFY 。 PLUNKER DEMO
在组件代码中执行以下操作
rapidPage = {"pageRows":[{"sections":[{"sectionRows":[{"secRowColumns":[]},{"secRowColumns":[{"colName":"users"}]},{"secRowColumns":[{"colName":"sample"}]}],"width":0}]}],"pageName":"DefaultPage","pageLayout":"DEFAULT_LAYOUT","editMode":true};
// your object
get rapidPageValue () {
return JSON.stringify(this.rapidPage, null, 2);
}
set rapidPageValue (v) {
try{
this.rapidPage = JSON.parse(v);}
catch(e) {
console.log('error occored while you were typing the JSON');
};
}
模板用法：
<textarea style="background-color:black;color:white;" [(ngModel)]='rapidPageValue' rows="30" cols="120">
</textarea>
为了在Angular 2中绑定textarea值，你可以使用更改函数：
模板
<textarea id="some-value" (change)="doTextareaValueChange($event)">{{textareaValue}}</textarea>
零件
export class AppComponent implements OnInit {
private textareaValue = '';
doTextareaValueChange(ev) {
try {
this.textareaValue = ev.target.value;
} catch(e) {
console.info('could not set textarea-value');
}
}
}
除非你真的想要在两者之间进行同步，否则通常会在完成json编辑时实现一个按钮来保存/应用更改。 如果是这样的话，你的渲染很容易。
<textarea #textbox>{{ rapidPage | json }}</textarea>
确保上面的行之间没有其他空格或返回字符。
然后是一个传统的按钮，例如。
<a (click)="updateRapidPage(textbox.value)">Apply</a>
我发现这在某些情况下比残酷[(rapidPage)]更好。
你也可以在组件内部使用@ViewChild('textbox') input来访问这个变量。