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?

javascripthtmljsonangular
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
Hasnain Ali Sohrani

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

1
Oscar Adrian Luevano Cadena

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