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?
Angenommen, Sie möchten rapidPage
so binden, wie es ist, und nur gültige JSON in die textArea schreiben.
PARSE
, wenn Sie den Wert ändern, und STRINGIFY
, wenn Sie im Textbereich angezeigt werden.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>
Zum Binden von Textarea-Werten in Angular 2 können Sie die Änderungsfunktion verwenden:
<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');
}
}
}
<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% !.
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.
Kannst du damit testen:
<textarea #textbox (change)="text = textbox.value" style="width:100%;">{{ text }}</textarea>
Grüße
ngModel funktioniert wenn
Andernfalls können Sie die folgende Syntax verwenden, um den gleichen Effekt zu erzielen
<textarea [value]="strVariableInComponent" (input)="strVariableInComponent = $event.target.value;"></textarea>
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
}
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.