Come assegnare un array alla proprietà dell'oggetto nel metodo di sottoscrizione angolare?
Sto cercando di ottenere il valore dell'array dal file di traduzione en.json in angolare e provo a collegarlo a una proprietà dell'oggetto come mostrato di seguito frammento di codice.
codice dattiloscritto:
ngOnInit() {
this.en = {
dayNamesMin: this.translateSvc
.get(['calendar.day_names_min.Sun', 'calendar.day_names_min.Mon', 'calendar.day_names_min.Tue', 'calendar.day_names_min.Wed',
'calendar.day_names_min.Thu', 'calendar.day_names_min.Fri', 'calendar.day_names_min.Sat'])
.subscribe(translated => {
console.log(Object.keys(translated).map(key => translated[key]));
return Object.keys(translated).map(key => translated[key]);
})
};
};
Il file en.json ha questo aspetto:
{
"calendar" : {
"day_names_min": {
"Sun": "SUN",
"Mon": "MON",
"Tue": "TUE",
"Wed": "WED",
"Thu": "THU",
"Fri": "FRI",
"Sat": "SAT"
}
}
}
Sto usando il servizio di traduzione ngx per ottenere i dati dal file en.json e quindi iscrivermi e assegnare un valore alla proprietà dayNamesMin dell'oggetto this.en.
Quando registro il valore Object.keys (tradotte) .map (chiave => tradotte [chiave]); valore nella console, sto ottenendo l'array corretto ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]. Ma non è vincolante per la proprietà dell'oggetto dayNamesMin.
Qualcuno può aiutare qui?
Risposte
Quando hai a che fare con dati asincroni utilizzando osservabili, è meglio assegnare valori all'interno della sua sottoscrizione invece di credere che la variabile verrà assegnata quando si accede. Nel tuo caso, potresti fare qualcosa del genere
ngOnInit() {
this.translateSvc.
.get([
'calendar.day_names_min.Sun',
'calendar.day_names_min.Mon',
'calendar.day_names_min.Tue',
'calendar.day_names_min.Wed',
'calendar.day_names_min.Thu',
'calendar.day_names_min.Fri',
'calendar.day_names_min.Sat'
])
.subscribe(translated => {
this.en = {
dayNamesMin: Object.keys(translated).map(key => translated[key])
};
});
}
Ora hai un'idea che alla this.en
variabile non viene assegnato un valore finché le this.translateSvc.get()
osservabili non emettono. Quindi è necessario ricordare che this.en
è asincrono quando si accede.
Maggiori informazioni sui dati asincroni qui .
Oppure, se desideri utilizzare la this.en
variabile nel modello solo per visualizzare i valori, puoi mappare l'output this.translateSvc.get()
utilizzando l' mapoperatore RxJS e utilizzare il asynctubo angolare .
Controller
en$: Observable<any>; ngOnInit() { this.en$ = this.translateSvc. // <-- assign the observable
.get([
'calendar.day_names_min.Sun',
'calendar.day_names_min.Mon',
'calendar.day_names_min.Tue',
'calendar.day_names_min.Wed',
'calendar.day_names_min.Thu',
'calendar.day_names_min.Fri',
'calendar.day_names_min.Sat'
])
.pipe( // <-- transform the response here
map(translated => ({ dayNamesMin: Object.keys(translated).map(key => translated[key]) }))
);
}
Modello
<ng-container *ngIf="(en$ | async) as en">
{{ en.dayNamesMin | json }}
{{ en.dayNamesMin[0] }}
...
<p *ngFor="let day of en.dayNamesMin">
{{ day }}
</p>
</ng-container>
Aggiornamento: utilizzare con il calendario PrimeNg
Come mostrato nella seconda variante, usa l' map
operatore RxJS per trasformarlo nel formato oggetto richiesto e usalo come input nel modello HTML.
<ng-container *ngIf="(en$ | async) as en">
<p-calendar
dateFormat="dd/mm/yy"
[(ngModel)]="value"
[locale]="en"> <!-- use `en` from the async pipe -->
</p-calendar>
</ng-container>