在Angular 2中，textarea的ngModel无法正常工作。

18 浏览
0 Comments

在Angular 2中，textarea的ngModel无法正常工作。

我正在尝试使用 ngModel 将 JSON 对象打印到文本区域中。\n我已经完成了以下工作：\n

\n我希望将 JSON 对象加载到文本区域中。上述代码将 rapidPage 对象加载到文本区域，但文本区域的值显示为 [object Object]。\n对象：\n

 this.rapidPage = {            
        "pageRows": [
            {
                "sections": [
                    {
                        "sectionRows": [
                            {
                                "secRowColumns": [                                       
                                ]
                            },
                            {
                                "secRowColumns": [
                                    {
                                        "colName": "users"
                                    }
                                ]
                            },
                            {
                                "secRowColumns": [
                                    {
                                        "colName": "sample"
                                    }
                                ]
                            }
                        ],
                        "width": 0
                    }
                ]
            }
        ],
        "pageName": "DefaultPage",
        "pageLayout": "DEFAULT_LAYOUT",
        "editMode": true
    };

\n我希望将数据加载为字符串。\n有任何建议吗？

0

3 答案

0 Comments

在Angular 2中，绑定textarea的值可以使用change函数。上述代码中，通过在textarea标签中使用(change)事件绑定，将输入的值传递给doTextareaValueChange方法。在组件中，定义了一个私有变量textareaValue来存储textarea的值，并在doTextareaValueChange方法中将输入的值赋给该变量。

然而，有些情况下，上述方法不能正常工作，导致ngModel无法正确绑定textarea的值。导致这个问题的原因可能是由于Angular的变更检测机制不会自动检测到textarea的值的变化。

解决这个问题的方法是使用ngModel来绑定textarea的值。ngModel是Angular提供的一个双向绑定指令，可以将输入框的值与组件中的变量实时同步。

Template

<textarea id="some-value" [(ngModel)]="textareaValue"></textarea>

在上述代码中，使用[(ngModel)]指令将textarea的值与组件中的textareaValue变量双向绑定起来。这样，无论是从组件中修改textareaValue的值，还是从textarea中输入值，都会实时同步。

同时，在使用ngModel指令时，需要在组件中引入FormsModule模块。

Component

import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [
    FormsModule
  ]
})
export class AppComponent implements OnInit {
  private textareaValue = '';
}

通过引入FormsModule模块，可以确保ngModel指令的正常工作。

通过使用ngModel指令来绑定textarea的值，可以解决ngModel for textarea not working in angular 2的问题。

0
0 Comments

问题的出现原因是ngModel在textarea上不起作用，除非添加name属性。解决方法是在textarea标签中添加name属性。此外，还有一些其他的解决方法，如使用[(ngModel)]、添加#message='ngModel'等。一些用户表示在Angular 9版本中仍然存在问题，出现了错误信息"Cannot assign value '$event' to template variable 'message'. Template variables are read-only."

0
0 Comments

问题：在Angular 2中，ngModel无法在textarea上工作。

原因：在textarea上使用ngModel绑定时，需要在更改值时对其进行解析，并在在textarea中显示时进行字符串化。

解决方法：

1. 在组件代码中进行以下操作：

rapidPage = {"pageRows":[{"sections":[{"sectionRows":[{"secRowColumns":[]},{"secRowColumns":[{"colName":"users"}]},{"secRowColumns":[{"colName":"sample"}]}],"width":0}]}],"pageName":"DefaultPage","pageLayout":"DEFAULT_LAYOUT","editMode":true}; 
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');
  };
}

2. 在模板中使用：

解释：以上代码片段演示了如何在Angular 2中实现在textarea上使用ngModel绑定的功能。在组件中，我们定义了一个名为`rapidPage`的对象，并使用`rapidPageValue`属性来获取和设置该对象的字符串形式。在设置`rapidPageValue`时，我们使用`JSON.parse`对字符串进行解析，并在获取`rapidPageValue`时使用`JSON.stringify`进行字符串化。在模板中，我们使用双向数据绑定将`rapidPageValue`绑定到textarea的ngModel上。

这样，我们就可以在textarea中编辑JSON对象，并且在修改时进行解析，以便在Angular组件中使用该对象。

0