lo que quiero lograr es obtener el id para ejecutar una función en un boton de una tabla hecha en datatables
tengo el siguiente código en html:
<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions">
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let e of ciudades_List">
<td>{{ e.id }}</td>
<td>{{ e.nombre }}</td>
<td>
<button (click)="open(content,e.id)" mat-fab color="primary" aria-label="">
<mat-icon>edit</mat-icon>
</button>
<button mat-fab color="primary" aria-label="" style="background-color:red">
<mat-icon>delete</mat-icon>
</button>
</td>
</tr>
</tbody>
en la línea donde dice
<button (click)="open(content,e.id)" mat-fab color="primary" aria-label="">
estoy intentando buscar que sea algo así:
<button (click)="open(content,1)" <!-- donde es el quiero poner el id correspondiente -->
tengo una tabla anterior sin usar datatables que funciona pero intentando replicar no funciona en datatables. aquí dejo el código:
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
</ng-container>
<ng-container matColumnDef="nombre">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Nombre de la Ciudad</th>
<td class="padding-table" mat-cell *matCellDef="let element">
{{ element.nombre | uppercase }}
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Acciones</th>
<td class="padding-table" mat-cell *matCellDef="let element">
<button (click)="open(content,element.id)" mat-button class="button_color_primary">
<mat-icon style="color: white">edit</mat-icon>
</button>
<button (click)="Eliminar_Ciudad(content, element.id)" mat-button class="button_color_primary" style="background-color:red">
<mat-icon style="color: white">delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons aria-label="Seleccionar pagina de usuarios.">
</mat-paginator>
Aquí dejo el codigo del Ts:
mport { Component,OnDestroy,EventEmitter,Input, OnInit, Output, SimpleChanges, ViewChild, ElementRef } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { AlertHelper } from 'src/app/shared/components/helpers/alert.helpers';
import { Ciudad } from 'src/app/shared/models/ciudades.interface';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { CiudadService } from 'src/app/pages/services/ciudades.service';
import * as XLSX from 'xlsx';
@Component({
selector: 'app-lista-ciudades',
templateUrl: './lista-ciudades.component.html',
styleUrls: ['./lista-ciudades.component.css']
})
export class ListaCiudadesComponent implements OnInit, OnDestroy {
dtOptions :any = {};
dtTrigger =new Subject() ;
fileName= 'ciudades.xlsx';
exportexcel(): void
{
let element = document.getElementById('tabla');
const ws: XLSX.WorkSheet =XLSX.utils.table_to_sheet(element);
const wb: XLSX.WorkBook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
XLSX.writeFile(wb, this.fileName);
}
@Input() ciudades_List:Ciudad[]=[];
@Output() onDebounce: EventEmitter<boolean> = new EventEmitter();
debouncer: Subject<boolean> = new Subject();
update_ciudades: Ciudad = {
id:0,
nombre:""
};
//dataCiudad: Ciudad[] = [];
displayedColumns: string[] = ['id', 'nombre','actions'];
dataSource = new MatTableDataSource<Ciudad>(this.ciudades_List);
@ViewChild(MatPaginator) paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;
constructor(
private alert:AlertHelper,
private modalService: NgbModal,
private ciudadService: CiudadService
) { }
ngOnInit(): void {
//console.log('la lista de ciudades',this.ciudades_List);
this.debouncer
.pipe(debounceTime(500))
.subscribe( valor => {
this.onDebounce.emit( valor );
});
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 10,
dom: 'Bfrtip',
/*
columns: [{
title: 'ID',
data:this.ciudades_List,
}, {
title: 'Nombre',
data: 'nombre'
},
],
*/
buttons: [
'copy', 'excel', 'pdf','print'
],
language: {
url:'//cdn.datatables.net/plug-ins/1.11.3/i18n/es-cl.json'
}
};
this.dtTrigger.next();
}
ngOnChanges(changes: SimpleChanges) {
if(changes.ciudades_List!=undefined){
if (!changes.ciudades_List.firstChange) {
this.dataSource = new MatTableDataSource<Ciudad>(this.ciudades_List);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
}
}
open(content:any,id:number) {
this.update_ciudades.id=id
this.ciudadService.Obtener_ciudad(id).subscribe(res =>{
this.update_ciudades.nombre=res.data.nombre;
})
this.limpiar_ciudades();
this.modalService.open(content);
}
limpiar_ciudades(){
this.update_ciudades.nombre=""
}
Actualizar_Ciudades(){
if(this.update_ciudades.nombre.trim().length==0){
this.alert.error_small('Los campos no pueden estar vacios.')
return
}
this.ciudadService.Actualizar_ciudad(this.update_ciudades).subscribe(res =>{
if (res.success==true) {
this.alert.success_small(res.msg!)
this.modalService.dismissAll();
this.limpiar_ciudades();
this.debouncer.next( true );
}else{
this.alert.error_small(res.msg!)
}
})
}
Eliminar_Ciudad(content:any,id:number){
this.ciudadService.Eliminar_Ciudad(id).subscribe(res =>{
if (res.success==true) {
this.alert.success_small(res.msg!)
this.debouncer.next( true );
}else{
this.alert.error_small(res.msg!)
}
})
}
ngOnDestroy(): void {
this.dtTrigger.unsubscribe();
}
}
La aplicación está montada en angular 11.1.4 La versión de node es la 17.1.0
Ya intente Bastantes combinaciones y ninguna me a funcionado correctamente