Kendo UI Angular 网格选择不起作用

Question

我正在为 Angular 使用 Kendo UI，我目前正在尝试让一个简单的 Grid 工作。

这是我的代码：

<!-- my-comp.component.html -->

<kendo-grid
  [data]="options"
  [selectable]="selectableSettings"
>
  <kendo-grid-checkbox-column [width]="50"></kendo-grid-checkbox-column>
  <kendo-grid-column
    *ngFor="let col of columns"
    field="{{ col.field }}"
    title="{{ col.title }}"
  >
  </kendo-grid-column>
</kendo-grid>

// my-comp.component.ts
// NOTE: class declaration is omitted for clarity

get columns() {
  return [
    { field: "name", title: "Code" },
    { field: "label", title: "Label" },
    { field: "description", title: "Description" }
  ];
}

get options() {
  return [
    { name: "toto", label: "tata", description: "titi" },
    { name: "toto2", label: "tata2", description: "titi2" },
    { name: "toto3", label: "tata3", description: "titi3" },
  ];
}

get selectableSettings(): SelectableSettings {
  return { mode: 'single', checkboxOnly: false, enabled: true };
}

网格显示正确，但每当我尝试单击行中的某些内容时，什么也没有发生...相反，"forcing"通过代码进行的选择有效。
我相信这与我的项目设置有关，但我找不到问题所在。另外，我还应用了 Bootstrap 主题。

这是我的 package.json（只有部门）：

"dependencies": {
  "@angular-devkit/schematics": "^9.1.7",
  "@angular/animations": "^9.1.9",
  "@angular/common": "^9.1.9",
  "@angular/compiler": "^9.1.9",
  "@angular/core": "^9.1.9",
  "@angular/forms": "^9.1.9",
  "@angular/localize": "^9.1.9",
  "@angular/platform-browser": "^9.1.9",
  "@angular/platform-browser-dynamic": "^9.1.9",
  "@angular/router": "^9.1.9",
  "@ngrx/data": "^9.1.2",
  "@ngrx/effects": "^9.1.2",
  "@ngrx/entity": "^9.1.2",
  "@ngrx/router-store": "^9.1.2",
  "@ngrx/store": "^9.1.2",
  "@ngrx/store-devtools": "^9.1.2",
  "@ngx-translate/core": "^12.1.2",
  "@ngx-translate/http-loader": "^4.0.0",
  "@progress/kendo-angular-buttons": "^5.4.2",
  "@progress/kendo-angular-common": "^1.2.2",
  "@progress/kendo-angular-dateinputs": "^4.3.0",
  "@progress/kendo-angular-dropdowns": "^4.2.7",
  "@progress/kendo-angular-excel-export": "^3.1.3",
  "@progress/kendo-angular-grid": "^4.7.2",
  "@progress/kendo-angular-inputs": "^6.6.0",
  "@progress/kendo-angular-intl": "^2.0.1",
  "@progress/kendo-angular-l10n": "^2.0.1",
  "@progress/kendo-angular-label": "^2.3.1",
  "@progress/kendo-angular-layout": "^5.0.1",
  "@progress/kendo-angular-pdf-export": "^2.0.3",
  "@progress/kendo-angular-popup": "^3.0.5",
  "@progress/kendo-angular-progressbar": "^0.2.3",
  "@progress/kendo-data-query": "^1.5.3",
  "@progress/kendo-drawing": "^1.7.0",
  "@progress/kendo-theme-bootstrap": "^4.16.2",
  "@progress/kendo-theme-default": "latest",
  "bootstrap": "^4.4.1",
  "chart.js": "^2.9.3",
  "core-js": "^3.6.5",
  "moment": "^2.25.3",
  "mutationobserver-shim": "^0.3.5",
  "ng2-charts": "^2.3.1",
  "ngx-bootstrap": "^5.6.1",
  "rxjs": "^6.5.5",
  "ts-helpers": "^1.1.2",
  "tslib": "^1.12.0",
  "web-animations-js": "^2.3.2",
  "zone.js": "~0.10.3"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.901.7",
  "@angular/cdk": "^9.2.4",
  "@angular/cli": "^9.1.7",
  "@angular/compiler-cli": "^9.1.9",
  "@angular/language-service": "^9.1.9",
  "@angular/material": "^9.2.4",
  "@ngrx/schematics": "^9.1.2",
  "@schematics/angular": "^9.1.7",
  "@types/node": "^13.11.1",
  "@typescript-eslint/eslint-plugin": "^3.0.2",
  "codelyzer": "^5.2.2",
  "eslint": "^7.1.0",
  "eslint-config-prettier": "^6.11.0",
  "eslint-plugin-prettier": "^3.1.3",
  "fibers": "^3.1.0",
  "html-webpack-plugin": "^4.3.0",
  "ngx-color": "^5.1.2",
  "node-sass": "^4.14.1",
  "prettier": "^2.0.5",
  "prettier-eslint": "^10.1.1",
  "ts-node": "^8.10.1",
  "tslint": "^6.1.2",
  "typescript": "~3.8.3"
},

感谢您的帮助。

Answer 1

解决方案很愚蠢...我只需要将 options 只读集合转换为读写集合（因此，删除 get）。

options = [
    { name: "toto", label: "tata", description: "titi" },
    { name: "toto2", label: "tata2", description: "titi2" },
    { name: "toto3", label: "tata3", description: "titi3" }
];

Kendo UI Angular 网格选择不起作用

Kendo UI Angular Grid selection doesn't work

typescript

kendo-ui-angular2

angular