文章分類/

Infragistics|Ignite UI for Angular|將 IgxSelect 合併到 IgxGrid 中

0 次瀏覽
2023-11-01 更新

infragistics log

IgxGrid 的編輯功能可以自訂,以使用您最喜歡的輸入編輯器而不是預設編輯器。讓我們合併IgxSelect 。

1. 導入 IgxSelectModule。也要導入 FormsModule。

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

import { registerLocaleData } from '@angular/common';
import localeJa from '@angular/common/locales/ja';
registerLocaleData(localeJa);

import {
  changei18n,
  IgxGridModule,
  IgxSelectModule
} from 'igniteui-angular';
import { IgxResourceStringsJA } from 'igniteui-angular-i18n';
changei18n(IgxResourceStringsJA);

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    IgxGridModule,
    IgxSelectModule
  ],
  providers: [
    { provide: LOCALE_ID, useValue: 'ja-JP' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. 使用 igxCellEditor 指令定義一個單元格編輯模板,並在其中放置一個 IgxSelect。

    <igx-column [field]="'column1'" [editable]="true">
      <ng-template igxCellEditor let-cell="cell">
        <igx-select [displayDensity]="grid.displayDensity"
                    [(ngModel)]="cell.editValue">
          <igx-select-item *ngFor="let item of items"
                           [value]="item">
            {{ item }}
          </igx-select-item>
        </igx-select>
      </ng-template>
    </igx-column>

關鍵是使用 ngModel 在 IgxSelect 和 cell.editValue 之間進行雙向綁定。*為此,需要 FormsModule。

items 是您想要使用 IgxSelect 顯示的集合。使用 ngFor 循環 IgxSelectItem。將每個項目的值綁定到 value 屬性。

快速跳轉目錄

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

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

Picture of 軟體專家
軟體專家

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

更多軟體新知

立即詢價

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

詢價資訊