J'essaie d'imprimer l'objet json dans textarea en utilisant ngModel
.
J'ai fait suite à:
<textarea style="background-color:black;color:white;" [(ngModel)]='rapidPage' rows="30" cols="120">
</textarea>
Je veux charger l'objet json dans textarea. Le code ci-dessus charge l'objet rapidPage
dans textarea, mais affiche sa valeur textarea comme [object Object]
.
objet:
this.rapidPage = {
"pageRows": [
{
"sections": [
{
"sectionRows": [
{
"secRowColumns": [
]
},
{
"secRowColumns": [
{
"colName": "users"
}
]
},
{
"secRowColumns": [
{
"colName": "sample"
}
]
}
],
"width": 0
}
]
}
],
"pageName": "DefaultPage",
"pageLayout": "DEFAULT_LAYOUT",
"editMode": true
};
Je veux charger les données sous forme de chaîne . Des entrées?
En supposant que vous souhaitiez lier rapidPage
tel quel et que vous n'écririez que du JSON valide dans textArea.
PARSE
lors de la modification de la valeur et STRINGIFY
lors de l'affichage dans textarea.Faites ce qui suit dans votre code de composant
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');
};
}
Utilisation du modèle:
<textarea style="background-color:black;color:white;" [(ngModel)]='rapidPageValue' rows="30" cols="120">
</textarea>
Pour relier les valeurs textarea dans Angular 2, vous pouvez utiliser la fonction de changement:
<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>
Vous devez simplement ajouter un attribut dans la balise textarea name="message"
, UNIQUEMENT [(ngModel)]
fonctionne à 100%!.
Sauf si vous voulez vraiment avoir une synchronisation entre vous, vous devriez normalement implémenter un bouton pour enregistrer/appliquer les modifications une fois l’édition terminée. Si tel est le cas, votre rendu est facile.
<textarea #textbox>{{ rapidPage | json }}</textarea>
Assurez-vous qu'aucun autre caractère ou caractère de retour ne se trouve entre la ligne ci-dessus.
Puis un bouton traditionnel, ex.
<a (click)="updateRapidPage(textbox.value)">Apply</a>
J'ai trouvé que c'était mieux dans certains cas que [(rapidPage)]
brutal.
Vous pouvez également utiliser @ViewChild('textbox') input
dans le composant pour accéder à cette variable.
Pouvez-vous tester avec ceci:
<textarea #textbox (change)="text = textbox.value" style="width:100%;">{{ text }}</textarea>
Cordialement
Selon la documentation, [()] est un sucre à syntaxe bidirectionnelle permettant de retirer le passe-partout. Quel événement est invoqué à cela? Indépendamment, vous pouvez mettre une sortie de chaîne également avec l'événement dans le code ci-dessous
Essayez probablement l’implémentation de code ci-dessous pour votre sortie de chaîne
@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
}
Vous pouvez stringify
votre json et l'utiliser dans le ngModel comme ceci -
<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);
Exemple de travail Working Example
Le navigateur affiche [object object]
car angular ne permet pas d’analyser le JSON, ni de définir la valeur dans ngModel. Une chaîne est nécessaire pour la convertir. Utilisez donc JSON.stringify