1

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> &nbsp;
            <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

2
  • no veo que uses en // ts--> open(content,element.id) a content--> utilidad? que error te da
    – nestdan
    Commented el 2 dic. 2021 a las 15:32
  • 1
    @nestdan ya solucione en el ts donde mandaba a llamar a la función open (content:any,id:number) estaba exigiendo que el id sea de tipo number en vez de eso deje la función (content:any,id:any) y si funciono
    – lxluxo23
    Commented el 2 dic. 2021 a las 16:15

1 respuesta 1

1

Encontre el error. En la función:

open(content:any,id:number) {
this.update_ciudades.id=id
this.ciudadService.Obtener_ciudad(id).subscribe(res =>{
  this.update_ciudades.nombre=res.data.nombre;
})

Estaba exigiendo que el id fuera de tipo number daba este error


Argument of type 'number | undefined' is not assignable to parameter of type 'number'.
Type 'undefined' is not assignable to type 'number'.

solucione el error cambiando la función en el TS:

open(content:any,id:any) {
this.update_ciudades.id=id
this.ciudadService.Obtener_ciudad(id).subscribe(res =>{
  this.update_ciudades.nombre=res.data.nombre;
})

dejando el id de tipo any

1
  • si bárbaro que lo pudiste solucionar pero te comento que en el las nuevas versiones de Angular hay problemas al usar any Si se puede castear usando $any() o también el non-null assertion operator, !.to suspend strict null and undefined checks angular.io/guide/…
    – nestdan
    Commented el 2 dic. 2021 a las 18:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.