ngModel do textarea nie działa w angular2

Question

Próbuję wydrukować obiekt json w textarea przy użyciu ngModel.

Zrobiłem następujący:

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

Chcę załadować obiekt json w textarea. Powyższy kod ładuje obiekt rapidPage w textarea, ale jego wyświetlana wartość textarea to [object Object].

obiektu:

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

Chcę załadować dane jako ciąg. Jakieś wejścia?

Answer 1

Zakładając, że chcesz związać rapidPage jak to jest i będzie tylko napisać poprawny JSON w the textArea.

• Trzeba go PARSE przy zmianie wartości, a STRINGIFY gdy pokazano w textarea.

---

PLUNKER DEMO

Wykonaj następujące czynności w kodzie komponentu

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 Zastosowanie:

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

Answer 2

Zgodnie z dokumentacją [()] dla cukru dwuskładnikowego należy usunąć podstawową tabliczkę. Jakie wydarzenie jest na to przywoływane? Niezależnie, można umieścić wyjście ciąg również wynajęliśmy zdarzenia w kodzie poniżej

Prawdopodobnie spróbować poniższy kod implementacja do produkcji strun

@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

Można stringify swoją json i używać w ngModel tak -

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

Przykład roboczy Working Example

Przeglądarka pokazuje [object object] ponieważ kątowe unables do analizowania JSON asign wartość w ngModel musi potrzebujesz ciąg więc przekonwertować to przy użyciu JSON.stringify

Answer 4

Dla wiązania wartości textarea w Kątowymi 2 można wykorzystać zmianę -funkcja:

Szablon

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

Komponent

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