Angular 7 SlickGrid Detail-View：无法将EventEmitter从Detail-View（child）组件传递到SlickGrid（父组件）

Question

我使用Angular SlickGrid作为父组件，使用插件Detail-View作为子组件。在Detail-View组件中，我使用了几个按钮来执行特定任务。其中之一是删除按钮。问题是单击按钮时，它将触发组件服务以通过其ID从网格中删除选定的行。后端工作完美。但！在前端，该行仍然可见，除非我手动重新加载页面。而且我需要单击时将父组件中的该行删除。我尝试使用EventEmitters，但SlickGrid显然无法识别此功能。如果一切都集中在一个组件中，我可以轻松使用：this.angularGrid.gridService.deleteItemById(del_id);但是由于详细视图数据由rowDetailView中的this.gridOptions传递，因此没有像<app-row-detail-view></app-row-detail-view>那样的组件模板标记

我的详细信息视图组件（子项）

：

  @Input() del_id: string;
  @Output() onDelete = new EventEmitter<string>();

  model: {
    id: string;
    domains: string;
    example_site: string;
    status: string;
    created: string;
    image: string;
  };

  deleteRecipe() {
    if (confirm('Are You sure?')) {
      console.log("EVENT 1");
      this.del_id = this.model.id;
      this.onDelete.emit(this.del_id);
      console.log(this.del_id);
      return this.recipeService.removeRecipe(this.del_id)
      .subscribe(u => {
        return u;
      });
    }
  }
我的详细信息查看HTML（子级）

：

<button (click)="deleteRecipe()">DELETE</button>
我的父母组件HTML

：

<angular-slickgrid
      gridId="grid11"
      [columnDefinitions]="columnDefinitions"
      [gridOptions]="gridOptions"
      [gridWidth]=1500
      [dataset]="dataset"
      (onAngularGridCreated)="angularGridReady($event)"
      (onDelete)="onDeleted($event)"
      >
</angular-slickgrid>
而且我不能在这里使用类似[del_id]="del_id"的东西，因为我在控制台中遇到了很大的错误。

我的父母组件.ts

：

  onDeleted(del_id: string) {
    console.log("EVENT 2");
    console.log(del_id);
    this.angularGrid.gridService.deleteItemById(del_id);
  }

  this.gridOptions = {
      enableAsyncPostRender: true,
      enableFiltering: true,
      enableAutoResize: true,
      enableCellNavigation: true,
      enableGrouping: false,
      enableRowDetailView: true,
      enableColumnReorder: false,
      rowSelectionOptions: {
        selectActiveRow: true
      },
      rowDetailView: {
        process: (item: any) => this.simulateServerAsyncCall(item),
        viewComponent: RecipeDetailsComponent,
        loadOnce: true,
        singleRowExpand: true,
        useRowClick: true,
        panelRows: this.detailViewRowCount
      }
    };

  simulateServerAsyncCall(item: any) {
    return new Promise((resolve) => {
      const itemDetail = item;
      resolve(itemDetail);
    });
  }
我已经尝试了很多有关EventEmitters的文章，例如：https://github.com/6pac/SlickGrid/blob/master/plugins/slick.rowdetailview.js#L10，https://www.infragistics.com/community/blogs/b/infragistics/posts/understanding-output-and-eventemitter-in-angular，https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/modules/angular-slickgrid/models/rowDetailView.interface.ts。

任何帮助将不胜感激！预先感谢您，亲爱的同事！

我使用Angular SlickGrid作为父组件，使用插件Detail-View作为子组件。在Detail-View组件中，我使用了几个按钮来执行特定任务。其中之一是删除按钮。问题...

Answer 1

请注意，我是Angular-Slickgrid的作者。