Angular 2+从事件（ag网格）访问类变量

Question

I'm trying to create a button that would edit a class' boolean to true upon being clicked. The code looks like this:

export class componentName{

    public editingMode = false;
    private colDefinitions = [
    {
        headername: "Edit",
        field: "edit",
        cellRenderer: this.editCellRendererFunc
    }];


    editCellRendererFunc(params){
        element.addEventListener('click', () => {
            // Need to modify editingMode from here.
        }
    }

    constructor(private _svc:GridHTTP){
            this.gridOptions = <GridOptions>{};
            this.gridOptions = {
                enableFilter: true,
                columnDefs: this.colDefinitions
            }
    }

I understand that I can't access the pointer anymore. Is there any method of having this variable be accessible so I can use an *ngIf in the template.html in order to hide/show DOM elements whenever that button is clicked?

Answer 1

usually what i do if a want to have a EDITABLE TABLE (or smilar) is like this:

1 - create a edit : boolean field in your model ... so for example:

export class Use{

public id: number;
public name:string;
 // ... other prop
public edit: boolean //put this .. maybe you can have in a entitybase and then extends ALL your models from tit
}

2 - in your HTML:

<table>


 <th>ID</th>
 <th>NAME</th>
 <th> OTHER </th>

 <tbody>
    <tr *ngFor="let row of rows" (click)="editable(row)">
    <td *ngIf="!row.edit" [innerText]="row.id"></td>
    <td *ngIf="row.edit"><input type="number" step="1" [(ngModel)]="row.id" /> </td>
    <td *ngIf="!row.edit" [innerText]="row.name"></td>
    <td *ngIf="row.edit"><input type="text"[(ngModel)]="row.name" /> </td>
    <td *ngIf=""><input type="number" step="1" [(ngModel)]="row.id" /> </td>
    </tr>
    </tbody>
</table>

3- in your ts file (component)

editable(item : User){

//first make all edit=false
this.rows.foreach(xx=>xx.edit=false);

//then set edit=true the clicked row
row.edit=true;

}

..matìybe then you have to make a directive to make all rows.edit=false when YOU CLICK OUTSIDE the table (you can find some example on stackoverflow)

Hope it helps you!!

Answer 2

Ag grid allows for custom parameters apparently, doing as follows allows access to the class scope:

            // under columnDefs
            {
                headerName: "Edit",
                field: "edit",
                cellRenderer: this.editCellRendererFunc,
                cellRendererParams: {
                    _self: this;
                }
            }

    // Later in the code
     editCellRendererFunc(params) {
          params._self.changeEditingMode(true);    
     }