如何为下拉列表填充数组，其中值已经外部化 [Angular]

Question

我想我还没有很好地理解外化概念。我有一个简单的下拉菜单，其选项存储在相应的打字稿文件中。

HTML

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

打字稿

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

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

zh-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。我想我误解了这个概念。

Answer 1

您当前的尝试有很多问题。

首先，下载所有必要的依赖：

"@ngx-translate/http-loader": "4.0.0" 
"@ngx-translate/core": "11.0.1",

接下来，在 app.module

中设置加载器

@NgModule({
  imports: [
    ...
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ]
})
export class AppModule {}

定义加载程序

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new TranslateHttpLoader(httpClient);
}

在app.component.ts决定哪个[lang].json文件你需要加载

  constructor(private translate: TranslateService) {
    translate.setDefaultLang("en");
    translate.use("en");
  }

现在在组件中决定来自 i18n 文件的 keys 是必需的。

  ngOnInit() {
    this.sources = [
      "Modes.CalendarYear",
      "Modes.YearToDate",
      "Modes.Rolling12Months",
      "Modes.CurrentQuarter"
    ];
  }

并在模板上使用 translate 管道 国际化价值观。

<select [(ngModel)]="mode" name="source">
  <option *ngFor="let source of sources" [value]="source">
    {{ source | translate }} 
  </option>
</select>

Working stackblitz 以上步骤

如何为下拉列表填充数组，其中值已经外部化 [Angular]

How to populate the array for a dropdown where values are externalized already [Angular]

json

typescript

ngx-translate

angular