angular - 如何在 ag-grid 中的一行顶部覆盖控件？

Question

我需要在包含与特定条件匹配的数据的行之上添加特定控件。这些标准缺少需要使用内联编辑功能添加的必需信息。我们想要的是一个导航控件，它位于第一个匹配行的顶部，并通过单击“下一步”引导您到下一个，这将使网格向上滚动到下一个匹配行，这将在顶部显示另一个控件及以上允许导航到下一个匹配行或转到上一个。
假设我们有一个汽车列表，并且我们希望用户浏览价格低于或等于 45k 的汽车行，您会看到如下内容:

在下一次单击时，您将看到如下内容:

我相信为了拥有这个功能，我需要一个对行的引用，并在 DOM 中注入(inject)一个相对于每行单击的组件。但我不知道该怎么做。我试图将组件动态添加到第一个匹配行的 native 元素，如下所示:

  onGridReady(params) {
    this.api = params.api;
    this.columnApi = params.columnApi;

    params.api.forEachNode((node, index) => {
      if(node.data.price <= 45000) {
        this.matchingIndexes.push(index);
      }
    });

    let firstRowRef = this.gridElementRef.nativeElement.querySelectorAll(`[row-index="${this.matchingIndexes[0]}"]`)[1];
    
    const factory = this.factoryResolver.resolveComponentFactory(PagingOverlayComponent)
    const component = factory.create(firstRowRef.parentInjector)
    this.viewContainerRef.insert(component.hostView);
  }

我希望能够以某种方式相对于它必须附加的行插入组件，以便我可以将它定位在它上面。这是我能走的最远的:

关于如何实现这一目标的任何想法？
Please find a working stackblitz here

Answer 1

我们为银行中的一个应用程序做了与此非常相似的事情，但我们使用的是 AdapTable，它是位于 ag-Grid 之上的一个组件。
它有一个搜索功能，其中包括一个仅返回所有结果集的选项。它还具有跳转到单元格并突出显示单元格的 api 方法。因此，我们创建了与此非常相似的内容，每次单击箭头时，我们都会让 AdapTable 突出显示并跳转到 ag-Grid 中的相关单元格。
这很容易实现——最多几个小时——但正如我所说，我们直接使用了 AdapTable 而不是 ag-Grid，我不知道它在内部做了什么来将搜索结果集返回给我们。