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

我对外部化知之甚少。我正在创建一个角度月采摘器。在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() 以及许多其他的解决方案,但仍然是空白。请纠正我执行中的错误。