Функция щелчка с помощью угловой 6 ag-сетки

Поэтому я пытаюсь настроить ag-grid и не могу заставить работать что-то одно. Я хочу иметь столбец, который действия. Затем я хочу, чтобы он имел ссылку или кнопку, которая вызывает метод в файле компонента.

Для столбца def у меня есть следующее. Что я делаю неправильно?

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

Ответ 1

Я использую cellRenderFramework:

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

и чем у меня есть пользовательский компонент

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

Ответ 2

Используйте cellRendererFramework для добавления кнопок действия.

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

В приведенном выше коде мы можем видеть CellCustomComponent. Создайте этот компонент и добавьте кнопки.

клеточно-custom.component.html

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

Теперь в cell-custom.component.ts добавьте функции

клеточный 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);
}
}

После этого нам нужно добавить этот компонент в 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 { }

Теперь мы можем вызвать метод в файле компонента, используя кнопку.