我认为我不太了解外部化概念。我有一个简单的下拉菜单，其选项存储在相应的打字稿文件中。

HTML

<select>
  <option *ngFor="let source of modeOptions" [value]="source">
    {{ source }}
  </option>
</select>

打字稿

modeOptions= ['Calendar year','Current quarter','Rolling year'];

但是现在我决定将所有值都外部化。

en-Us.json

{
  "Modes": {
    "CalendarYear": "Calendar year","YearToDate": "Year-to-date","Rolling12Months": "Rolling 12 months","CurrentQuarter": "Current quarter"
  }
}

打字稿

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

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

    mode = 'Calendar year';

    public sources = [];
    public modeOptions = [];

    constructor(private translate: TranslateService) {}

    translateCard(): void {
      this.translate
        .get([
          'Months.CalendarYear','Months.YearToDate','Months.Rolling12Months','Months.CurrentQuarter'
        ])
        .subscribe(translations => {
          this.sources.push(translations['Months.CalendarYear']);
          this.sources.push(translations['Months.YearToDate']);
          this.sources.push(translations['Months.Rolling12Months']);
          this.sources.push(translations['Months.April']);
          this.sources.push(translations['Months.CurrentQuarter']);

          // PROBLEM IS HERE
          this.modeOptions = Array.from({ length: Math.ceil(this.sources.length) },(_,i) => i).map(i =>
                    this.modeOptions.map(x => ({

                    }))
                );
          console.log("Modes are: "+this.modeOptions); //OUTPUT: Modes are:,});
    }

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

问题在于填充我的选项数组。这就是为什么我的下拉列表为空。它没有显示任何选项。我之前也犯了类似的错误，但这是Dropdown之外的其他组件。我想我误解了这个概念。