ngМодель для textarea не работает в angular2

Question

Я пытаюсь распечатать объект json в textarea, используя ngModel.

Я сделал следующее:

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

Я хочу, чтобы загрузить объект JSON в текстовое поле. Вышеприведенный код загружает объект rapidPage в textarea, но его значение 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 как это и будет писать только действительный JSON в textArea.

• Вы должны PARSE его при изменении значения, и 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

В соответствии с документацией [()] для двухстороннего синтаксического сахара удаляется шаблон. Какое событие вызывается при этом? Независимо от того, вы можете поместить вывод строки также Alongwith события в ниже код

Возможно попробовать ниже код реализация для вывода строк

@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 3

Вы можете 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] потому, что угловые unables для разбора JSON Asign значения в ngModel необходимо нужна строка так преобразовать это с помощью JSON.stringify

Answer 4

Для связывания значений TEXTAREA в угловых 2 вы можете использовать изменения -функция:

Шаблон

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