Come assegnare un array alla proprietà dell'oggetto nel metodo di sottoscrizione angolare?

Aug 21 2020

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

1 MichaelD Aug 21 2020 at 21:53

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.envariabile 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.envariabile 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' mapoperatore 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>