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

Question

我正在尝试创建一个按钮，在单击时将类的布尔值编辑为true。代码如下所示：

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
            }
    }

我知道我不能再访问指针了。是否有任何方法可以访问此变量，因此我可以在template.html中使用* ngIf，以便在单击该按钮时隐藏/显示DOM元素？

Answer 1

通常我想做的如果想要有一个EDITABLE TABLE（或类似的）是这样的：

1 - 在模型中创建一个edit：boolean字段...例如：

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 - 在您的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>

ts文件中的3-（组件）

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然后你必须做一个指令，当你点击表格外的所有rows.edit = false（你可以在stackoverflow上找到一些例子）

希望它能帮到你!!

Answer 2

Ag网格显然允许自定义参数，如下所示允许访问类范围：

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

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