我对外部化了解不多。我在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',... '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()和许多其他解决方案，但还是空白。请更正我的实现问题。