要解决“Angular 8 Kendo Grid: 在编辑模式下下拉框不显示选中的项目”的问题,你可以使用kendo-dropdownlist
组件并设置valuePrimitive
属性为true
。
下面是一个示例代码,展示了如何在Angular 8中使用Kendo Grid,并在编辑模式下正确显示选中的项目:
npm install --save @progress/kendo-angular-dropdowns @progress/kendo-angular-grid
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GridModule } from '@progress/kendo-angular-grid';
import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
GridModule,
DropDownListModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
kendo-grid
和kendo-dropdownlist
来定义Grid和下拉框列:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: './app.component.html'
})
export class AppComponent {
public gridData: any[] = [
{ productName: 'Product 1', category: 'Category 1' },
{ productName: 'Product 2', category: 'Category 2' },
{ productName: 'Product 3', category: 'Category 3' }
];
public categories: any[] = [
{ categoryId: 1, categoryName: 'Category 1' },
{ categoryId: 2, categoryName: 'Category 2' },
{ categoryId: 3, categoryName: 'Category 3' }
];
public editHandler({ sender, rowIndex, dataItem, isNew }) {
sender.editRow(rowIndex);
}
}
这样,当你编辑Grid行时,下拉框将正确显示选中的项目。