文章分類/

Infragistics|Ignite UI for Angular|IgxGrid 多國語系

293 瀏覽人次
2023-07-17 更新

infragistics log

安裝資源字符串的 igniteui-angular-i18n 包。

npm install igniteui-angular-i18n

註冊 Angular 本身以使用ja-JP語言環境,並註冊 igniteui-Angular 以通過Changei18n函數使用日語資源。


app.module.ts

import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule, LOCALE_ID } from '@angular/core'; import { registerLocaleData } from '@angular/common'; import localeJa from '@angular/common/locales/ja'; registerLocaleData(localeJa); import { changei18n, IgxGridModule } from 'igniteui-angular'; import { IgxResourceStringsJA } from 'igniteui-angular-i18n'; changei18n(IgxResourceStringsJA); import { AppComponent } from './app.component'; @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     BrowserAnimationsModule,     IgxGridModule   ],   providers: [     { provide: LOCALE_ID, useValue: 'ja-JP' }   ],   bootstrap: [AppComponent] }) export class AppModule { } 


將 igx-grid 的 locale 設置屬性設置為ja -JP 。

app.component.html

<div style=“width: 100vw; height: 100vh;”>

<!– locale に「ja-JP」をセット –>

<igx-grid [locale]=“‘ja-JP'”

[data]=“data”

[displayDensity]=“‘compact'”

[allowFiltering]=“true”

[filterMode]=“‘excelStyleFilter'”

[rowSelectable]=“true”

[showToolbar]=“true”

[columnHiding]=“true”>

<igx-column *ngFor=“let column of columns”

[field]=“column.field”

[header]=“column.header”

[dataType]=“column.dataType”

[width]=“column.width”

[editable]=“column.editable”

[filterable]=“column.filterable”

[groupable]=“column.groupable”

[hasSummary]=“column.hasSummary”

[movable]=“column.movable”

[pinned]=“column.pinned”

[resizable]=“column.resizable”

[sortable]=“column.sortable”>

</igx-column>

</igx-grid>

</div>


Localize 後



快速跳轉目錄

✦ 群昱 AccessSoft 你的全面軟體解決方案 ✦

身為全球眾多知名軟體在台灣合作夥伴,歡迎諮詢你需要的軟體服務!

Picture of 軟體專家
軟體專家

群昱作為全球知名軟體推薦合作夥伴,致力於提供更多軟體解決方案給你!

更多軟體新知

立即詢價

請留下完整資訊,以便我們提供精確的服務內容給你。

詢價資訊