グリッドにボタンを実装する

Question

私はグリッドのすべての行に削除ボタンを作成するためにag-gridのthis exampleから学びたいと思っています。上記の例はうまくいきますが、私のコードはそうではありません。理由を理解できません。

私のコードを添付して、誰かが私を助けることを願っています。

home.component.ts：

@Component({ 
    selector: 'home', 
    providers: [ 
    Title 
    ], 
    styleUrls: [ './home.component.css' ], 
    templateUrl: './home.component.html' 
}) 
export class HomeComponent implements OnInit { 
    private items: Item[] = []; 
    private gridOptions:GridOptions; 
    private columnDefs = []; 

    constructor(
    private itemsService: ItemsService 
) { 
    this.gridOptions = {}; 
    this.columnDefs = this.createColumnDefs(); 
    } 

    remove() { 
    alert("yey!") 
    } 

    ngOnInit(){ 
    this.itemsService 
     .getAll() 
     .subscribe(result => { 
     this.items = result; 
     }); 
    } 

    private createColumnDefs() { 
    return [ 
     { 
     headerName: "Foo", 
     field: "foo", 
     width: 100, 
     }, 
     { 
     headerName: "Bar", 
     field: "bar", 
     width: 100, 
     }, 
     { 
     headerName: "", 
     field: "_id", 
     cellRendererFramework: RemoveButton, 
     colId: "params", 
     width: 100 
     }, 
    ]; 
    } 
} 

home.component.html：

<div> 
     <ag-grid-angular #agGrid style="width: 602px; height: 350px;" class="ag-fresh" 
         [gridOptions]="gridOptions" 
         [columnDefs]="columnDefs" 
         [rowData]="items"> 
     </ag-grid-angular> 
    </div> 

RemoveButton.ts：グリッドが、全てのデータを用いて表示される

@Component({ 
    selector: 'remove-button', 
    template: `<span><button style="height: 20px" (click)="remove()">X</button></span>` 
}) 
export class RemoveButton implements ICellRendererAngularComp { 
    public params: any; 

    agInit(params: any): void { 
    this.params = params; 
    } 

    public remove() { 
    this.params.context.componentParent.remove(); 
    } 
} 

、ボタンをクリックするとこのエラーが発生します：

ERROR TypeError: Cannot read property 'componentParent' of undefined 
    at RemoveButton.webpackJsonpac__name_.453.RemoveButton.remove 

contextの意味paramsは定義されていません。

さらなるコードや情報が必要な場合は、私にお知らせください。

Answer 1

私は私の問題を解決しました。私が定義していないので、明らかにcontextは未定義でした。コンテキストを定義してgridOptionsを解決しました。

this.gridOptions ={ 
     context: { 
     componentParent: this 
     } 
    };