ngModello per area di testo non funzionante in angular2

Question

Sto provando a stampare l'oggetto json in textarea utilizzando ngModel.

ho fatto seguente:

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

voglio caricare l'oggetto JSON in textarea. Il codice sopra riportato sta caricando l'oggetto rapidPage in textarea ma il suo valore textarea è visualizzato come [object Object].

oggetto:

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

voglio caricare i dati come stringa. eventuali ingressi?

Answer 1

Supponendo che si desidera associare rapidPage in quanto è e sarà solo scrivere valida JSON in l'area di testo.

• È necessario PARSE che quando si cambia il valore, e STRINGIFY quando mostra nella textarea.

---

PLUNKER DEMO

fare il seguente nel codice Componente

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

Template Usage:

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

Answer 2

Come da documentazione [()] è per lo zucchero di sintassi a due vie per rimuovere la piastra di riscaldamento. Quale evento viene invocato in questo? A prescindere, si può mettere un uscita stringa anche alongwith l'evento nel codice qui sotto

probabilmente provare il codice Implementazione di seguito per l'output stringa

@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

È possibile stringify tua JSON e utilizzare nella ngModel come questo -

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

lavoro Esempio Working Example

Browser mostra [object object] perchè unables angolari per analizzare il JSON il Asign il valore in ngModel è necessario bisogno di una stringa in modo da convertire questo utilizzando JSON.stringify

Answer 4

Per i valori textarea vincolante angolare 2 è possibile utilizzare il cambiamento -funzione:

Template

<textarea id="some-value" (change)="doTextareaValueChange($event)">{{textareaValue}}</textarea> 

Componente

export class AppComponent implements OnInit { 
    private textareaValue = ''; 
    doTextareaValueChange(ev) { 
    try { 
     this.textareaValue = ev.target.value; 
    } catch(e) { 
     console.info('could not set textarea-value'); 
    } 
    } 
}