时间戳

首页 > 解决方案 > Angular 中 Ag-grid 单元的事件侦听器

angular - Angular 中 Ag-grid 单元的事件侦听器

问题描述

我Ag-grid按照文档Angular 9使用。

所以这是一个非常基本的网格，其中包含一些汽车型号和汽车价格。

编写此代码的父组件是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');
  }

}

标签： angularag-gridaddeventlistenerag-grid-angular

解决方案

你必须绑定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;  
  }

参考

推荐阅读