剑道 UI Angular 网格选择不起作用

Question

I'm using Kendo UI for Angular and I'm currently trying to make a simple Grid to work.

Here's my code:

<!-- 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 };
}

The grid is displayed correctly, but whenever I try to click on something in the row, nothing happens... On the contrary, "forcing" the selection via code is working.
I believe this has something to do with my project setup, but I can't find what's wrong. On a side note, I also applied the Bootstrap theme.

Here's my package.json (only the deps):

"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"
},

Thanks for your help.

Answer 1

The solution is quite silly... I just needed to transform the options read-only collection into a read-write collection (thus, removing the get ).

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