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

通常，如果要拥有一个可编辑的表（或smilar），我会做的是这样的：

1-创建一个编辑：模型中的布尔字段...例如：

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>

3-在您的TS文件（组件）

中

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然后，您必须制定一个指令来制作所有行。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);    
     }