请注意，我是 Angular-Slickgrid 的作者
答案在我在那个问题中给你留下的评论中，看起来你在代码中没有使用它，这就是它不起作用的原因。基本上，您引用的是 issue 的旧代码（我确定它不起作用，答案是在同一问题上引用的最后一个 PR 的 1）示例 3 cmets 具有您需要的所有答案和解释（这是代码 sn-p 我在锁定问题之前离开了，因此我锁定了它，因为这就是答案，我缩短了问题中的代码，以更清楚地表明它是你需要的，并且为了快速回顾它是下面的行）
const allColumns = this.angularGrid.gridService.getAllColumnDefinitions();
它不工作 grid.getColumns() 仅仅是因为 Angular-Slickgrid 按摩列定义（快速解释在下面的 cmets 中）并且在示例 3 代码 here 中提到，你必须阅读底部的NOTE，它确实涵盖了您的用例。
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 中编写的注释 NOTE，这正是您需要做的，因为您使用的是复选框选择器扩展（可用在这个line的示例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 属性（这是您想要使用的任何编辑器，例如Editor.singleSelect）但我想将编辑器和过滤器与类似的结构对齐，因此您只需编写一个列像这样的定义（你可以在下面看到，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）和所以最好理解“为什么”。