我正在尝试使用在文本区域中打印 json 对象ngModel
.
我做了以下工作:
<textarea style="background-color:black;color:white;" [(ngModel)]='rapidPage' rows="30" cols="120">
</textarea>
我想在textarea中加载json对象。上面的代码是加载rapidPage
textarea 中的对象,但其将 textarea 值显示为[object Object]
.
object:
this.rapidPage = {
"pageRows": [
{
"sections": [
{
"sectionRows": [
{
"secRowColumns": [
]
},
{
"secRowColumns": [
{
"colName": "users"
}
]
},
{
"secRowColumns": [
{
"colName": "sample"
}
]
}
],
"width": 0
}
]
}
],
"pageName": "DefaultPage",
"pageLayout": "DEFAULT_LAYOUT",
"editMode": true
};
我想将数据作为字符串加载。
有任何输入吗?
假设你要绑定rapidPage
照原样,只会在 textArea 中写入有效的 JSON。
- 你需要
PARSE
改变值时它,并且STRINGIFY
在文本区域中显示时。
StackBlitz 演示 https://stackblitz.com/edit/angular-wyfnas
在您的组件代码中执行以下操作
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 [(ngModel)]='rapidPageValue' rows="30" cols="120">
</textarea>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)