Angular 6 ag-grid

Question

J'essaie donc de configurer une grille ag et je n'arrive pas à faire fonctionner une chose. Je veux avoir une colonne qui est des actions. Ensuite, je veux qu'il ait un lien ou un bouton qui déclenche une méthode dans le fichier de composant.

Pour la colonne def, j'ai ce qui suit. Qu'est-ce que je fais mal?

 {
    headerName: 'Actions',
    cellRenderer: params => {
      return `<a (click)="onEditClick("${params.data.hostname}")">Edit</a>`;
    }
 }

Answer 1

J'utilise cellRenderFramework:

    {
    headerName: '', width: 30,
    cellRendererFramework: ActionCellRendererComponent,
    cellRendererParams: {
      icon: 'fa-download',
      action: this.downloadAttachmentAction
    }
  }

et que j'ai un composant personnalisé

@Component({
  selector: 'cu-download-link-cell-renderer',
  template: `
  <div class="text-center">
    <i class="fa {{params.icon}}" (click)="onClick()" aria-hidden="true"></i>
  </div>`
})
export class ActionCellRendererComponent {

    params;

    constructor() {
    }

    agInit(params): void {
        this.params = params;
        if (_.isNil(params.action)) {
            throw new Error('Missing action parameter for ActionCellRendererComponent');
       }
   }

   onClick(): void {
       this.params.action(this.params);
   }
}

export type CellAction = (params) => void;

Answer 2

Utilisez cellRendererFramework pour ajouter des boutons d'action.

App.component.ts

columnDefs = [
{headerName: 'First Name', field: 'firstName', sortable: true, filter: true},
{headerName: 'Last Name', field: 'lastName', sortable: true, filter: true},
{headerName: 'Email', field: 'email', sortable: true, filter: true},
{headerName: 'User Name', field: 'userIdName', sortable: true, filter: true},
{headerName: 'Role', field: 'role', sortable: true, filter: true},
{headerName: 'Actions', field: 'action', cellRendererFramework: CellCustomComponent}];

rowData: any;

ngOnInit() {
const empDatas = localStorage.getItem('user');
const finalData = JSON.parse(this.empDatas);
this.rowData = this.finalData;
}

Dans le code ci-dessus, nous pouvons voir CellCustomComponent . Créez ce composant et ajoutez les boutons.

cell-custom.component.html

<button type="button" class="btn-success" (click)="editRow()">Edit</button>
<button type="button" class="btn-success" (click)="viewRow()">View</button>

Maintenant dans la cellule-custom.component.ts ajoutez les fonctions

cell-custom.component.ts

export class CellCustomComponent implements OnInit {
data: any;
params: any;
constructor(private http: HttpClient, private router: Router) { }

agInit(params) {
this.params = params;
this.data =  params.value;
}

ngOnInit() {}


editRow() {
let rowData = this.params;
let i = rowData.rowIndex;
console.log(rowData);

}

viewRow() {
let rowData = this.params;
console.log(rowData);
}
}

Après cela, nous devons ajouter ce composant dans App.module.ts

app.Module.ts

@NgModule({

declarations: [
AppComponent,
CellCustomComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule,
AgGridModule.withComponents([AppComponent]),
],
providers: [], entryComponents: [CellCustomComponent],
bootstrap: [AppComponent]
})
export class AppModule { }

Nous pouvons maintenant déclencher une méthode dans le fichier de composant à l'aide de Button.