webentwicklung-frage-antwort-db.com.de

ngModel für Textbereiche, die nicht in angle2 funktionieren

Ich versuche, ein Json-Objekt im Textbereich mit ngModel zu drucken.

Ich habe folgendes gemacht:

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

Ich möchte das Json-Objekt in den Textbereich laden. Der obige Code lädt das rapidPage-Objekt in Textbereich, zeigt jedoch den Textarea-Wert als [object Object].

objekt:

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

Ich möchte die Daten als Zeichenfolge laden ... beliebige Eingaben?

14
Bhushan Gadekar

Angenommen, Sie möchten rapidPage so binden, wie es ist, und nur gültige JSON in die textArea schreiben.

  • Sie müssen PARSE, wenn Sie den Wert ändern, und STRINGIFY, wenn Sie im Textbereich angezeigt werden.

PLUNKER DEMO

Führen Sie in Ihrem Komponentencode Folgendes aus

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

Vorlagenverwendung: 

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

Zum Binden von Textarea-Werten in Angular 2 können Sie die Änderungsfunktion verwenden:

Vorlage

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

Komponente

export class AppComponent implements OnInit {
  private textareaValue = '';
  doTextareaValueChange(ev) {
    try {
      this.textareaValue = ev.target.value;
    } catch(e) {
      console.info('could not set textarea-value');
    }
  }
}
9
Markus Brunner
<textarea class="form-control" 
          name="message"
          rows="8"
          [(ngModel)]="Obj.message"
          #message='ngModel'
          ></textarea>

Sie müssen lediglich ein Attribut im textarea-Tag name="message" hinzufügen. NUR [(ngModel)] funktioniert zu 100% !.

4

Wenn Sie nicht wirklich zwischendurch synchronisieren möchten, würden Sie normalerweise eine Schaltfläche zum Speichern/Übernehmen der Änderung implementieren, wenn die Bearbeitung abgeschlossen ist. Wenn dies der Fall ist, ist das Rendern einfach.

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

Stellen Sie sicher, dass sich zwischen der obigen Zeile kein Leerzeichen oder Leerzeichen befindet.

Dann ein traditioneller Knopf, z. 

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

Ich habe festgestellt, dass dies in manchen Fällen besser ist als brutale [(rapidPage)].

Sie können auch @ViewChild('textbox') input in der Komponente verwenden, um auf diese Variable zuzugreifen.

3
windmaomao

Kannst du damit testen:

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

Grüße

ngModel funktioniert wenn

  1. Es ist ein Formular umschlossen, und dem Textbereich wurde ein Namensattribut hinzugefügt.

Andernfalls können Sie die folgende Syntax verwenden, um den gleichen Effekt zu erzielen

<textarea [value]="strVariableInComponent" (input)="strVariableInComponent = $event.target.value;"></textarea>
0
Anand Rockzz

Laut Dokumentation [()] ist für Zweiweg-Syntaxzucker die Boilerplate zu entfernen. Welches Ereignis wird dabei aufgerufen? Unabhängig davon können Sie eine String-Ausgabe auch zusammen mit dem Ereignis in den folgenden Code einfügen

Versuchen Sie wahrscheinlich die nachstehende Codeimplementierung für Ihre Zeichenfolgenausgabe

@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
}
0
mattymanme

Sie können Ihren json stringify und im ngModel so verwenden -

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

Arbeitsbeispiel Working Example

Der Browser zeigt [object object] an, da Angular JSON nicht analysieren kann, um den Wert in ngModel zuzuweisen. Sie müssen eine Zeichenfolge verwenden, um dies mit JSON.stringify zu konvertieren.

0
Pardeep Jain