如何在外部化字符串数组[Angular]时使用TranslateService

Question

我对外部化了解不多。我在Angular中创建一个月选择器。在我的typesccript文件中，我有一个数月的带有硬编码名称的数组：

arr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

我的上级告诉我将它们外部化在一个单独的json文件中，以便以后可以根据需要轻松地对其进行修改。现在，我将向您展示我的代码。

monthpicker.component.ts

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
    ...
})
export class MonthpickerComponent implements OnInit {

    constructor(private translate: TranslateService){
    }


    //arr = ['Jan', 'Feb', ... 'Nov', 'Dec'];
    monthArray = []; /* USING A DIFFERENT EMPTY ARRAY INSTEAD*/

    translateCard(): void {
        this.translate
            .get([
                'Months.January',
                'Months.February',
                ...
                'Months.December'
            ])
            .subscribe(translations => {
                this.monthArray.push(translations['Months.January']);
                this.monthArray.push(translations['Months.February']);
                ...
                this.monthArray.push(translations['Months.December']);
            });
            console.log(this.monthArray);
    }

    ngOnInit(): void {
        this.translateCard();
    }

   /* CODE TO READ MONTH NAMES AND RENDER IN HTML*/
    n = 4;
    matrix: any = Array.from({ length: Math.ceil(this.monthArray.length / this.n) }, (_, i) => i).map(i =>
        this.monthArray.slice(i * this.n, i * this.n + this.n).map(x => ({
            monthName: x,
            isSelected: false
        }))
    );

   ...
}

monthpicker.component.html

<div *ngFor="let row of matrix" class="my-table">
  <span *ngFor="let x of row">
    <span class="month-name">
      {{ x.monthName }}
    </span>
  </span>
</div>

还有这里en-US.json

{
  "Months": {
    "January": "Jan",
    "February": "Feb",
    ...
    "October": "Oct",
    "November": "Nov",
    "December": "Dec"
  }
}

这是我所有的代码。控制台上甚至没有一个错误或警告。实际上，console.log(this.monthArray[])也可以正确打印所有月份。但是在前端，我的月选择面板绝对空白。什么都没发生。我认为我的电话在这里是异步的：

ngOnInit(): void {
  this.translateCard();
}

我尝试过safely use translate.instant()和许多其他解决方案，但还是空白。请更正我的实现问题。

Answer 1

订阅后，您需要填充matrix数组，即>

translateCard(): void {
    this.translate
        .get([
            'Months.January',
            'Months.February',
            ...
            'Months.December'
        ])
        .subscribe(translations => {
            this.monthArray.push(translations['Months.January']);
            this.monthArray.push(translations['Months.February']);
            ...
            this.monthArray.push(translations['Months.December']);
            // populate matrix
            this.matrix = Array.from({ length: Math.ceil(this.monthArray.length / 
                this.n) }, (_, i) => i).map(i =>
                    this.monthArray.slice(i * this.n, i * this.n + this.n).map(x => ({
                        monthName: x,
                        isSelected: false
                    }))
               );
        });

}