在 Angular 9 中使用 ngx 翻译数组

Question

I am declaring an Array in TS and I want to be able to translate them. It is possible to translate an Array with different languages. I do have something like this. The others variables are changing but only the Arrays not. Can someone help me there or at least any idea.

HTML.

 <div class="col-md-4 text-left flex-column">
    <select class="col-md-12">
      <option *ngFor="let language of languages"
              [value]="language">
        {{language.description | translate}}
      </option>
    </select>
  </div>

TS

public housingTypeOptions = [];

this.languages = [
      {name: Status.Mr, description: this.translateService.instant("data.mr")},
      {name: Status.Mrs, description: this.translateService.instant("data.mrs")},
    ];

JSON.

"status": {
    "single": "Single",
    "married": "Married",
    "nk": "Not Known"
  }

And this is the change with Languages.

<select
    class="form-control"
    #selectedLang
    (change)="switchLang(selectedLang.value)">
    <option *ngFor="let language of translate.getLangs()"
            [value]="language"
            [selected]="language === translate.currentLang">
      {{ language }}
    </option>
  </select>


    translate.addLangs(["de", "en", "al"]);

Answer 1

I have found the solution, I need only to pass the id in the description from array and then in html to write like this.

<select class="form-control">
  <option *ngFor="let status of statusObject"
      [value]="status">
      {{status.description | translate}}
  </option>
</select>

And in TS only like this, call direct the ID.

  public statusLanguages = [
    {name: Languages.AL, description: "language.al"},
    {name: Languages.EN, description: "language.en"},
    {name: Languages.DE, description: "language.de"}
  ];