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（或smilar），我通常会这样做：

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>

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然后你必须制定一个指令，当你点击表格外的所有row.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);    
     }

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

2 个答案: