Angular 中 Ag-grid 电池的事件侦听器

Question

我根据 documentation 在 Angular 9 中使用 Ag-grid。

所以这是一个非常基本的网格，其中填充了一些车型和汽车价格。

写这段代码的父组件是app component。现在我想在另一个组件（edit-car-details）中编辑任何汽车的详细信息（例如：价格）。

问题是当我通过向其添加点击事件侦听器来呈现 ag-grid 的单元格时，它们是定义在中的变量（editClicked） App component 我无法在监听器中访问。

Summary of the question : 有没有办法从父组件网格中特定单元格的事件侦听器向子组件发送数据？

app.component.ts

import { Component, EmbeddedViewRef } from '@angular/core';
import * as moment from 'moment-timezone';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Angular-latest-version';

  columnDefs = [
      { field: 'make' },
      { field: 'model' },
      { field: 'price' , cellRenderer: this.editCar}
  ];

  rowData = [
      { make: 'Toyota', model: 'Celica', price: 35000 },
      { make: 'Ford', model: 'Mondeo', price: 32000 },
      { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];

  editClicked : boolean = false;
  timeIndia;

  constructor(){
    this.timeIndia = moment.tz(moment(),'Asia/Kolkata').format('YYYY-MM-DD HH:mm:ss').valueOf();
  }

  editCar(params){
    var createDiv = document.createElement('div');
    createDiv.innerHTML = '<a style="font-weight:bold;">'+params.data.price+' <i class="fa fa-pencil" aria-hidden="true"></i></a>';
    createDiv.addEventListener('click', function(e){
      console.log('Inside listener');
      this.editClicked = true;                //<============ problem in this line  : ERROR in 
                                              // src/app/app.component.ts:37:12 - error TS2339: Property 
                                              //'editClicked' does not exist on type 'HTMLDivElement'
    });

    return createDiv;
  }

}

app.component.html

<div style="margin-left: 2em;">
  Current time is ::
  <br>
  <span style="font-weight: bold;font-size: 2em;">{{timeIndia}}</span>
  <ag-grid-angular
    style="width: 500px; height: 500px;"
    class="ag-theme-alpine"
    [rowData]="rowData"
    [columnDefs]="columnDefs">
  </ag-grid-angular>

  <app-edit-car-details *ngIf="editClicked"></app-edit-car-details>

</div>

edit-car-details.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-edit-car-details',
  templateUrl: './edit-car-details.component.html',
  styleUrls: ['./edit-car-details.component.css']
})
export class EditCarDetailsComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    console.log('inside edit component');
  }

}

Answer 1

您必须绑定 current context using arrow function:

    createDiv.addEventListener('click', () => {
          console.log('Inside listener');
          this.editClicked = true;                //<============ use arrow function
                                                  
        });

绑定current context and call a function

的另一种方法

 createDiv.addEventListener('click',this.ClickElement.bind(this));

  ClickElement(){
      console.log('Inside listener');
      this.editClicked = true;  
  }

Answer 2

{ field: 'price' , cellRenderer: this.editCar.bind(this)}

这行得通。从@yazan 得到想法。它与绑定当前上下文有关。

Angular 中 Ag-grid 电池的事件侦听器

Event Listener for Ag-grid cell in Angular

addeventlistener

ag-grid

angular

ag-grid-angular