In allen Komponenten Klassen von jeder Seite meiner Angular 2 Form, rufe ich eine API zum Abruf von gespeicherten Eingabewerte in einer globalen Variablen im JSON-Format innerhalb einer globalen gespeichert werden Service, wenn diese globale Variable noch nicht ausgefüllt wurde.HTML-Indizierung in JSON-Variable für NgModel
Nach dem Abrufen und Initialisieren der globalen Variablen mit den JSON-Daten aus der API möchte ich eine 2-Wege-Datenbindung mit NgModel auf jeder meiner HTML-Seiten mit den entsprechenden Werten innerhalb dieser globalen Variable einrichten. Ich habe jedoch Probleme bei der korrekten Indizierung dieser globalen Variablen, die meine JSON-Daten enthält. Ich möchte meinen Eingabewert direkt an die globale Variable binden, da ich beim Speichern des Formulars einfach einen Dienst aufrufen kann, der diese globale Variable im Hauptteil eines POST-Aufrufs sendet.
JSON Daten gespeichert in globalVariable: Wie bekomme ich "Wert a", "Wert b", "Wert c" im HTML?
{
"data": [
{
"field 1" : "value 1",
"page1" : {
"field a" : "value a"
"field b" : "value b"
},
"page2" : {
"field c" : "value c"
}
}
]
}
page1.component.ts:
constructor(..., public globalService: GlobalService:, @Inject(GlobalVariable) private globalVariable: any, ...) {}
ngOnInit() {
if (Object.keys(this.globalService.globalVariable).length < 1) {
this.globalService.getAPI().subscribe(
data => this.globalService.globalVariable = data['data'],
err => console.error(err),
() => {
console.log(this.globalService.globalVariable[0]['page1']['field a']); //Prints 'value a' correctly!
//In HTML:NgModel: I can't index globalVariable[0]['page1']['field a']
//this._privateVariable = this.globalService.globalVariable;
//In HTML:NgModel: I can't index _privateVariable[0]['page1']['field a']
//this._privateVariable = this.saveInformation.information[0]['page1'];
//In HTML:NgModel: I can index _privateVariable['field a'] for ['value a'], but //I don't want to manage many _privateVariables, each storing each page's input
//values to be sent in POST request in save.
}
)
}
}
page1.component.html:
...
<div>
<input type="text" [(ngModel)]="globalVariable[0]['page1']['field a']">
</div>
...
die obige Zeile gibt die folgenden Fehler auf die Konsole:
angular2.dev.js:25644 ORIGINAL EXCEPTION: TypeError: Cannot read property '0' of undefined