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

132 瀏覽人次

2023-11-01 更新

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 屬性。