如何在 Angular 8 中的 select 选项列表中本地化 WeekDay 枚举

Question

我想在 Angular 中创建一个包含工作日的简单下拉列表并将其本地化。

我找到了 WeekDay 枚举，它似乎非常适合这项工作。

 public weekDays: WeekDay[] = [WeekDay.Monday, WeekDay.Tuesday, WeekDay.Wednesday, WeekDay.Thursday, WeekDay.Friday, WeekDay.Saturday, WeekDay.Sunday];

App.Component.Ts

import { Component } from '@angular/core';
import { WeekDay } from '@angular/common';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public weekDays: WeekDay[] = [WeekDay.Monday, WeekDay.Tuesday, WeekDay.Wednesday, WeekDay.Thursday, WeekDay.Friday, WeekDay.Saturday, WeekDay.Sunday];

  public selectedWeekDay: WeekDay;

   constructor(        
        public translateService: TranslateService) { }
}

然后我在 html 文件中创建一个 Select 选项

App.Component.Html

 <select>
     <option *ngFor="let day of weekDays" value="day">{{day}} {{day | date: 'EEEE' : '' : translateService.currentLang}}</option>                           
 </select>

因为我来自丹麦，所以我想用丹麦语显示日期，所以我添加了翻译服务。这给了我一个星期四的列表，我知道这一定是因为 {{day}} 不是 date 类型，但我可以' 似乎找不到 WeekDays 的管道。但我无法想象 Angular?

中不应该已经内置了一些东西

最后我想将选定的 WeekDay 绑定到属性

  public selectedWeekDay: WeekDay;

我在这里创建了一个完整的示例。

https://stackblitz.com/edit/angular-slpqpy

Answer 1

这是我结束创建的解决方案。

app.component.html

 <select>
 <option *ngFor="let day of weekDays" value="day">{{ 'weekday.' + day | translate}}</option>
 </select>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import { HttpClient, HttpClientModule } from '@angular/common/http';
// ngx-translate
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

//Add Danish language
import { registerLocaleData } from '@angular/common';
import localeDanish from '@angular/common/locales/da';

registerLocaleData(localeDanish, 'dk');

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

// The HttpLoaderFactory is required for AOT (ahead of time) compilation.
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}

app.component.ts

import { Component } from '@angular/core';
import { WeekDay } from '@angular/common';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public weekDays: WeekDay[] = [WeekDay.Monday, WeekDay.Tuesday, WeekDay.Wednesday, WeekDay.Thursday, WeekDay.Friday, WeekDay.Saturday, WeekDay.Sunday];

  public selectedWeekDay: WeekDay;

   constructor(        
        public translateService: TranslateService) {
          translateService.addLangs(['dk', 'se']);
        translateService.setDefaultLang('dk');
        translateService.use('dk');
        }
}

assets/i18n/dk.json

{
  "weekday": {
            "1": "Mandag",
            "2": "Tirsdag",
            "3": "Onsdag",
            "4": "Torsdag",
            "5": "Fredag",
            "6": "Lørdag",
            "0": "Søndag"
        }
}

可以在此处找到一个运行示例 https://stackblitz.com/edit/angular-slpqpy

如何在 Angular 8 中的 select 选项列表中本地化 WeekDay 枚举

How to Localized WeekDay enums in select option list in Angular 8

html-select

localization

angular

angular8