Comment affecter un tableau à la propriété d'objet dans la méthode Angular Subscribe?

Question

J'essaie d'obtenir la valeur du tableau à partir du fichier de traduction en.json en angulaire et j'essaie de la lier à une propriété d'objet comme indiqué ci-dessous l'extrait de code.

code dactylographié:

  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]);
                  })
    };
  };

Le fichier en.json ressemble à ceci:

{
    "calendar" : {
        "day_names_min": {
            "Sun": "SUN",
            "Mon": "MON",
            "Tue": "TUE",
            "Wed": "WED",
            "Thu": "THU",
            "Fri": "FRI",
            "Sat": "SAT"
        }
    }
}

J'utilise le service de traduction ngx pour obtenir les données du fichier en.json, puis m'abonner et attribuer une valeur à la propriété dayNamesMin de l'objet this.en.

Lorsque j'enregistre la valeur Object.keys (traduit) .map (clé => traduit [clé]); valeur dans la console, j'obtiens le tableau approprié ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]. Mais il n'est pas lié à la propriété d'objet dayNamesMin.

Quelqu'un peut-il s'il vous plaît aider ici?

Answer 1

Lorsque vous traitez avec des données asynchrones à l'aide d'observables, il est préférable d'attribuer des valeurs à l'intérieur de son abonnement au lieu de croire que la variable sera affectée lors de son accès. Dans votre cas, vous pouvez faire quelque chose comme ce qui suit

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])
      };
    });
}

Vous avez maintenant une idée que la this.envariable n'a pas de valeur attribuée tant que les this.translateSvc.get()observables ne sont pas émis. Vous devez donc vous rappeler qu'il this.enest asynchrone lors de l'accès.

Plus d'informations sur les données asynchrones ici .

---

Ou disons que si vous souhaitez uniquement utiliser la this.envariable dans le modèle pour afficher les valeurs, vous pouvez mapper la sortie à l' this.translateSvc.get()aide de l' mapopérateur RxJS et utiliser le asynctube angulaire .

Manette

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]) }))
    );
}

Modèle

<ng-container *ngIf="(en$ | async) as en">
  {{ en.dayNamesMin | json }}
  {{ en.dayNamesMin[0] }}
  ...
  <p *ngFor="let day of en.dayNamesMin">
    {{ day }}
  </p>
</ng-container>

Mise à jour: utiliser avec le calendrier PrimeNg

Comme indiqué dans la deuxième variante, utilisez l' mapopérateur RxJS pour le transformer au format d'objet requis et utilisez-le comme entrée dans le modèle 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>