请注意，我是 Angular-Slickgrid 的作者
答案在我在那个问题中给你留下的评论中，看起来你在代码中没有使用它，这就是它不起作用的原因。基本上，您引用的是该问题的旧代码（我确定它不起作用，答案是在同一问题上引用的最后一个 PR 的 1）示例 3 注释具有您需要的所有答案和解释（这是代码片段我在锁定问题之前离开了，因此我锁定了它，因为这就是答案，我缩短了问题中的代码，以更清楚地表明它是你需要的，并且为了快速回顾它是下面的行）
const allColumns = this.angularGrid.gridService.getAllColumnDefinitions();
它不能grid.getColumns()仅仅因为 Angular-Slickgrid 处理列定义（快速解释在下面的评论中）并且在示例 3 代码中提到，您必须阅读底部的注释，它确实涵盖了您的用例。
dynamicallyAddTitleHeader() {
const newCol = {
id: `title${this.duplicateTitleHeaderCount++}`,
name: 'Title',
field: 'title',
editor: {
model: Editors.text,
required: true,
validator: myCustomTitleValidator, // use a custom validator
},
sortable: true, minWidth: 100, filterable: true,
};
// you can dynamically add your column to your column definitions
// and then use the spread operator [...cols] OR slice to force Angular to review the changes
this.columnDefinitions.push(newCol);
this.columnDefinitions = this.columnDefinitions.slice(); // or use spread operator [...cols]
// NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
// you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
// for example if you use the Checkbox Selector (row selection), you MUST use the code below
/*
const allColumns = this.angularGrid.gridService.getAllColumnDefinitions();
allColumns.push(newCol);
this.columnDefinitions = [...allColumns]; // (or use slice) reassign to column definitions for Angular to do dirty checking
*/
}
因此，在您的用例中，如果我们放大到我在示例 3 中编写的注释注释，这正是您需要做的，因为您使用的是复选框选择器扩展（在此行的示例 3 中可用）。
dynamicallyAddTitleHeader() {
//... add your new column
// NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
// you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
// for example if you use the Checkbox Selector (row selection), you MUST use the code below
const allColumns = this.angularGrid.gridService.getAllColumnDefinitions();
allColumns.push(newCol);
this.columnDefinitions = [...allColumns]; // (or use slice) reassign to column definitions for Angular to do dirty checking
}
如果您想知道这是为什么？然后继续阅读下面的完整解释......
您可能想知道，为什么 Angular-Slickgrid 会按摩列定义呢？出于一个简单的原因，SlickGrid 在内部使用editor属性（您想要使用的任何编辑器 like Editor.singleSelect）但我想将 Editors 和 Filters 与类似的结构对齐，因此您只需编写这样的列定义（您可以见下文，两者editor和filter是相同的结构）
const genderList = [{ label: 'male', value: 'male' }, { label: 'male', value: 'male' }];
this.columnDefinitions = [
{
id: 'gender', name: 'Gender',
editors: {
model: Editors.singleSelect,
collection: genderList
},
filters: {
model: Editors.singleSelect
collection: genderList
}
}
];
但实际上在初始化 Angular-Slickgrid 后，它会变成如下所示，它执行以下步骤
- 获取用户列定义
editor内容并将其移动到新属性中internalColumnEditor
- 用内容替换
editor属性editor.model
this.columnDefinitions = [
{
id: 'gender', name: 'Gender',
editor: Editors.singleSelect,
internalColumnEditor: { // <-- this is used internally by Angular-Slickgrid you should never change this, you can read it though
model: Editors.singleSelect,
collection: genderList
},
filters: {
model: Editors.singleSelect
collection: genderList
}
}
];
同样，这只是为编辑器和过滤器提供相同且易于理解的结构。当我构建它时，我本可以使用另一种方法和另一个属性，但我觉得以这种方式使用它更容易......而且我们很少需要使用internalColumnEditor，但是有一些例外（比如这个 SO question），所以它是很好理解“为什么”。