Wie ordne ich der Objekteigenschaft in der Angular Subscribe-Methode ein Array zu?

Question

Ich versuche, den Array-Wert aus der en.json-Übersetzungsdatei im Winkel abzurufen und ihn an eine Objekteigenschaft zu binden, wie im folgenden Codeausschnitt gezeigt.

Typoskript-Code:

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

Die Datei en.json sieht folgendermaßen aus:

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

Ich verwende den ngx-Übersetzerservice, um die Daten aus der Datei en.json abzurufen und dann die dayNamesMin-Eigenschaft dieses.en-Objekts zu abonnieren und einen Wert zuzuweisen.

Wenn ich den Wert Object.keys (übersetzt) ​​.map (key => translate [key]) protokolliere; Wert in der Konsole, ich erhalte das richtige Array ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]. Es ist jedoch nicht an die Objekteigenschaft dayNamesMin gebunden.

Kann hier bitte jemand helfen?

Answer 1

Wenn Sie mit asynchronen Daten mithilfe von Observablen arbeiten, ist es besser, Werte innerhalb des Abonnements zuzuweisen, als darauf zu vertrauen, dass die Variable beim Zugriff zugewiesen wird. In Ihrem Fall könnten Sie Folgendes tun

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

Jetzt haben Sie eine Idee, dass der this.enVariablen erst dann ein Wert zugewiesen wird, wenn die this.translateSvc.get()Observablen ausgegeben werden. Sie müssen sich also daran erinnern, dass this.endies beim Zugriff asynchron ist.

Weitere Informationen zu asynchronen Daten finden Sie hier .

---

Oder sagen Sie, wenn Sie nur die this.enVariable in der Vorlage zum Anzeigen der Werte verwenden möchten , können Sie die Ausgabe this.translateSvc.get()mithilfe des RxJS- mapOperators zuordnen und Angular asyncPipe verwenden.

Regler

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

Vorlage

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

Update: Mit PrimeNg-Kalender verwenden

mapVerwenden Sie, wie in der zweiten Variante gezeigt, den RxJS- Operator, um ihn in das erforderliche Objektformat zu transformieren und als Eingabe in die HTML-Vorlage zu verwenden.

<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>