イベントからの角型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 
      } 
    } 

私はもうポインタにアクセスできないことを理解しています。この変数をアクセス可能にするメソッドはありますか？そのボタンがクリックされたときにDOM要素を非表示にするにはtemplate.htmlの* ngIfを使用できますか？

Answer 1

通常EDITABLE TABLE（または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内：あなたの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; 

} 

で

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

..matìybeあなたは

はそれがあなたのお役に立てば幸いです（あなたはstackoverflowの上でいくつかの例を見つけることができます）は、テーブルの外側をクリックしたときに、すべてのrows.editが= falseを作るために指示をしなければなりません！

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