模板

Question

我正在尝试使用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
    };

我想将数据加载为字符串。任何输入？

Answer 1

假设您要按原样绑定rapidPage并且只在textArea中写入有效的JSON。

更改值时需要PARSE，而在textarea中显示时需要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>

Answer 2

要在Angular 2中绑定textarea值，您可以使用change-function：

模板

<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');
    }
  }
}

Answer 3

<textarea class="form-control" 
          name="message"
          rows="8"
          [(ngModel)]="Obj.message"
          #message='ngModel'
          ></textarea>

用于双向绑定，您只需要在textarea标签name="message"中添加属性，只有[(ngModel)]可以100％起作用！。

Answer 4

除非你真的希望在它们之间进行同步，否则你通常会在完成json编辑后实现一个按钮来保存/应用更改。如果是这种情况，您的渲染很容易。

<textarea #textbox>{{ rapidPage | json }}</textarea>

确保上述行之间没有其他空格或返回字符。

然后是传统按钮，例如

<a (click)="updateRapidPage(textbox.value)">Apply</a>

我发现在某些情况下这比残酷的[(rapidPage)]更好。

您还可以在组件内使用@ViewChild('textbox') input来访问此变量。

Answer 5

您可以对此进行测试吗？

<textarea #textbox (change)="text = textbox.value" style="width:100%;">{{ text }}</textarea>

致谢

Answer 6

ngModel在以下情况下有效

周围有一个表单，并且textarea中添加了name属性。

如果不这样做，则可以使用以下语法达到相同的效果

rand

Answer 7

根据文档[（）]是用于删除样板的双向语法糖。在这个被调用的事件是什么？无论如何，您可以将字符串输出与事件一起放在下面的代码中

可能为您的字符串输出尝试以下代码实现

@Directive({
  selector: '[ngModel]',
  host: {
    "[value]": 'ngModel',
    "(input)": "ngModelChange.next($event.target.value)"
  }
})
class NgModelDirective {
  @Input() ngModel:any; // stored value
  @Output() ngModelChange:EventEmitter; = new EventEmitter() // an event emitter
}

Answer 8

您可以stringify您的json并在ngModel中使用 -

<textarea style="height:100px; width:300px;background-color:black;color:white;" [(ngModel)]='rapidPage' rows="30" cols="120">
    </textarea>

ArrayDemo: Array<any> = [{"name":"pardeep","last":"jain"}]
  rapidPage = JSON.stringify(this.ArrayDemo);

工作示例 Working Example

浏览器显示[object object]因为angular无法解析JSON，所以在ngModel中将值设为必须需要一个字符串所以使用JSON.stringify

转换它

textarea的ngModel不在angular2中工作

8 个答案:

模板

组件