0

Tengo un problema, MatSort no funciona en mi MatTable, he intentando cambiar varias cosas (como por ejemplo traer primero la data del getMainList), pero ninguna me resulta, espero puedan apoyarme.

Dejo el código:

HTML:

<m-portlet [options]="{headLarge: true}">
    <ng-container mPortletHeadTitle>
        <div class="m-portlet__head-title">
            <h3 class="m-portlet__head-text"> Lista de Documentos de Medida </h3>
        </div>
    </ng-container>

    <ng-container mPortletHeadTools>
        <button type="button" mat-raised-button style="background-color: #FF8D00; color: white" matTooltip="Nuevo"  (click)="AddEditMedicionVehiculo(0)">
            <fa name="plus-circle" inverse='true'></fa>&nbsp;&nbsp;Nuevo Punto
        </button>
    </ng-container>     
    
    <ng-container mPortletBody>
        <div class="m-form">
            <div class="m-form__filtration">
                <div class="row">
                    <div class="col-md-12">
                        <form [formGroup]="formBusqueda">
                            <div class="row">
                                <!-- <div class="col-sm-2 m--margin-bottom-10-mobile">
                                    <mat-form-field class="mat-form-field-fluid">
                                        <mat-select formControlName="Equipo" placeholder="Vehiculo">
                                            <mat-option *ngFor="let item of Equipos" [value]="item.Id"> {{item.Placa}} </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                </div> -->
                                
                                <div class="col-sm-2 m--margin-bottom-10-mobile">
                                    <mat-form-field class="mat-form-field-fluid">
                                        <mat-select formControlName="Equipo" placeholder="Vehiculo" matInput>
                                            <mat-option>
                                                <ngx-mat-select-search [formControl]="filterEquipos" [placeholderLabel]="'Buscar...'" [noEntriesFoundLabel]="'No se encontró resultado'"></ngx-mat-select-search>
                                            </mat-option>
                                            <mat-option *ngFor="let item of filtered_Equipos | async" [value]="item.Id">
                                                {{item.Placa}}
                                            </mat-option>
                                        </mat-select>

                                    </mat-form-field>
                                </div>
                                
                                <div class="col-sm-3 m--margin-bottom-10-mobile">
                                    <mat-form-field class="mat-form-field-fluid">
                                        <mat-select formControlName="TipoPunto" placeholder="TipoPunto">
                                            <mat-option *ngFor="let item of TipoPuntos" [value]="item.Valor"> {{item.Nombre}} </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                </div>

                                <div class="col-sm-3 m--margin-bottom-10-mobile">
                                    <mat-form-field class="mat-form-field-fluid">
                                        <mat-select formControlName="UnidadMedida" placeholder="UnidadMedida">
                                            <mat-option *ngFor="let item of UnidadesMedida" [value]="item.UnidadMedida"> {{item.Nombre}} </mat-option>
                                        </mat-select>
                                    </mat-form-field>
                                </div>
                                
                                <div class="col-sm-1 m--margin-bottom-10-mobile">
                                    <button type="button" mat-mini-fab color="bg-green" (click)="getMainList()" matTooltip="Buscar">
                                        <fa name="search" inverse='true'></fa>
                                    </button>
                                </div>

                                <!-- <div class="col-sm-3">
                                    <mat-form-field class="col-md-12 search-form-field">
                                        <input matInput [(ngModel)]="searchKey" placeholder="Buscar en todos los campos" autocomplete="off" 
                                            class="mat-form-field mat-form-field-fluid" (keyup)="searchInsideTable()">
                                        <mat-hint align="start">
                                            <strong>Buscar en todos los campos</strong>
                                        </mat-hint>
                                    </mat-form-field>
                                </div> -->

                                <div class="col-sm-3">
                                    <mat-form-field class="mat-form-field-fluid">
                                        <input matInput  formControlName="searchKey" placeholder="Buscar en todos los campos" autocomplete="off" 
                                            class="mat-form-field mat-form-field-fluid" (keyup)="searchInsideTable()">
                                        <mat-hint align="start">
                                            <strong>Buscar en todos los campos</strong>
                                        </mat-hint>
                                    </mat-form-field>
                                </div>

                            </div>
                        </form>
                    </div>
                    
                </div>
            </div>
        </div>

        <div class="mat-table__wrapper">
            <mat-table [dataSource]="listData" matSort perfectScrollbar>
                <ng-container matColumnDef="N">
                    <mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">N°</mat-header-cell>
                    <mat-cell *matCellDef="let lesson,let i = index"> {{ i + 1}} </mat-cell>
                </ng-container>
                <!-- <ng-container matColumnDef="PuntoMedida">
                    <mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">PuntoMedida</mat-header-cell>
                    <mat-cell *matCellDef="let lesson">{{lesson.PuntoMedidaDisplay}}</mat-cell>
                </ng-container> -->
                <ng-container matColumnDef="Equipo">
                    <mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">Equipo</mat-header-cell>
                    <mat-cell *matCellDef="let lesson">{{lesson.EquipoDisplay}}</mat-cell>
                </ng-container>
                <ng-container matColumnDef="UnidadMedida">
                    <mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">UnidadMedida</mat-header-cell>
                    <mat-cell *matCellDef="let lesson">{{lesson.UnidadMedidaDisplay}}</mat-cell>
                </ng-container>
                <ng-container matColumnDef="TipoPunto">
                    <mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">TipoPunto</mat-header-cell>
                    <mat-cell *matCellDef="let lesson">{{lesson.TipoPuntoDisplay}}</mat-cell>
                </ng-container>
                <ng-container matColumnDef="Descripcion">
                    <mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">Descripcion</mat-header-cell>
                    <mat-cell *matCellDef="let lesson">{{lesson.DescripcionDisplay}}</mat-cell>
                </ng-container>
                <ng-container matColumnDef="Activo">
                    <mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">Activo</mat-header-cell>
                    <mat-cell *matCellDef="let lesson">
                        <span class="m-badge m-badge--{{ lesson.ActivoDisplay == 'SI' ? 'success': 'danger' }} m-badge--wide">{{ lesson.ActivoDisplay }}</span>
                    </mat-cell>
                </ng-container>
                <ng-container matColumnDef="FechaMedida">
                    <mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">Fecha Medida</mat-header-cell>
                    <mat-cell *matCellDef="let lesson">{{lesson.FechaMedidaDisplay | date:'dd/MM/yyyy HH:mm:ss' }}</mat-cell>
                </ng-container>
                
                <ng-container matColumnDef="Operaciones">
                    <mat-header-cell *matHeaderCellDef mat-sort-header class="head_back">Acciones</mat-header-cell>
                    
                    <mat-cell *matCellDef="let lesson">
                        <button  style="color: #00A09D !important" mat-icon-button color="primary" matTooltip="Editar Medicion" (click)="AddEditMedicionVehiculo(lesson.PuntoMedidaDisplay)">
                            <mat-icon>create</mat-icon>
                        </button>&nbsp;
                        
                        <button *ngIf="lesson.ActivoDisplay == 'SI' " mat-icon-button style="color: #F2242E !important" type="button" data-toggle="modal" (click)="enabledisabled(lesson.PuntoMedidaDisplay,false)" matTooltip="Dar de baja">
                            <mat-icon>delete</mat-icon>
                        </button>&nbsp;
                        
                        <button *ngIf="lesson.ActivoDisplay == 'NO' " mat-icon-button style="color: #b7343d !important" type="button" (click)="enabledisabled(lesson.PuntoMedidaDisplay,true)" matTooltip="Dar de Alta">
                            <mat-icon>done</mat-icon>
                        </button>
                    </mat-cell>
                </ng-container>
                
                <ng-container matColumnDef="loading">
                    <mat-footer-cell *matFooterCellDef colspan="10">
                        <mat-spinner [diameter]="20"></mat-spinner>&nbsp;&nbsp;&nbsp;Loading data...
                    </mat-footer-cell>
                </ng-container>

                <ng-container matColumnDef="noData">
                    <mat-footer-cell *matFooterCellDef colspan="10"> No se encontraron registros. </mat-footer-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>

                <mat-row *matRowDef="let row; columns: displayedColumns" class="hoverable_row"></mat-row>
                <mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide': load_data}"></mat-footer-row>
                <mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide': no_data}"></mat-footer-row>
            </mat-table>
        </div>
        <div class="mat-table__bottom">
            <mat-paginator #MatPaginator [pageSizeOptions]="[5, 10, 50, 100, 200]" [pageSize]="10" showFirstLastButtons></mat-paginator>
        </div>

    </ng-container>
</m-portlet>

Component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort, MatSortModule } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { ToastrManager } from 'ng6-toastr-notifications';
import { SubheaderService } from '../../../../../config/_core/services/subheader.service';
import { MantenimientoService } from '../../_core/services/mantenimiento.service';
import * as Excel from 'exceljs/dist/exceljs.min.js';
import { UtilsMantenimientoService } from '../../_core/utils/utils-mantenimiento.service';
import { Observable, ReplaySubject, Subject } from 'rxjs';
import { takeUntil } from "rxjs/operators";
import { UnidadMedida } from '../../../MMModuleApp/_core/models/unidad-medida.model';
import { database } from 'firebase';

@Component({
  selector: 'm-documentos-medida-vehiculo',
  templateUrl: './documentos-medida-vehiculo.component.html',
  styleUrls: ['./documentos-medida-vehiculo.component.scss']
})
export class DocumentosMedidaVehiculoComponent implements OnInit {

  Estados:Array<any>=[]; 
  TipoPuntos:Array<any>=[]; 
  UnidadesMedida: Array<any>=[]; 
  TipoOrdenes:Array<any>=[]; 
  SubTipos:Array<any>=[];
  Bases:Array<any>=[]; 
  Equipos:Array<any>=[]; 
  arrayList:Array<any>=[];
  
  displayedColumns: string[] = ['N','Equipo','UnidadMedida','TipoPunto','Descripcion','Activo','FechaMedida','Operaciones'];

  listData: MatTableDataSource<any>; 
  @ViewChild(MatSort) MatSort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;
   
  formBusqueda: FormGroup;
  
  posible_Equipos = null;
  filterEquipos: FormControl = new FormControl();
  filtered_Equipos: ReplaySubject<any> = new ReplaySubject<any>();
  array_Equipos: any = [];
  
  protected _onDestroy = new Subject<void>();
  
  searchBan: boolean = false;
  searchKey: string;
  load_data = false;
  no_data = true;


  constructor(
    private subheaderService: SubheaderService,
    public mantenimientoservice:MantenimientoService,
    private _formBuilder: FormBuilder,
    public toastr: ToastrManager,
    private utilsService: UtilsMantenimientoService
  ) { }

  ngOnInit() {

    this.subheaderService.setTitle('Mantenimiento');
    this.subheaderService.setBreadcrumbs([ { title: 'Mantenimiento - Documentos de Medida Vehículo'} ]);
  
    this.createFormBusqueda();
    this.getEquipos_combo(); 
    this.getMainList();
    

  }

  createFormBusqueda(){
    this.formBusqueda = this._formBuilder.group({
      Equipo: [0,Validators.required],
      TipoPunto: [0,Validators.required],
      UnidadMedida: [0, Validators.required] , 
      searchKey: [null],
    });
    
    this.mantenimientoservice.getTipoPunto().subscribe( (data: any) => { 
        this.TipoPuntos = data;
        this.TipoPuntos.unshift({ Valor: 0, Nombre: 'TODOS' })
        this.formBusqueda.controls.TipoPunto.setValue(0);
      }
    ); 

    this.mantenimientoservice.getUnidadesMedida().subscribe( (data: any) => { 
      
      this.UnidadesMedida = data; 
      this.UnidadesMedida.unshift({ UnidadMedida: 0, Nombre: 'TODOS' })
      this.formBusqueda.controls.UnidadMedida.setValue(0);
    }
      ); 
  }

  getEquipos_combo() {
        this.mantenimientoservice.getEquipos().subscribe(
            (data: any) => {
                this.array_Equipos = data;
                this.filtered_Equipos.next(this.array_Equipos.slice());
                this.filterEquipos.valueChanges
                    .pipe(takeUntil(this._onDestroy))
                    .subscribe(() => {
                        this.filtrar_Equipos();
                    });
                this.formBusqueda.controls.Equipo.setValue(
                    Number(this.posible_Equipos)
                );
            },
            (errorServicio) => {
                console.log(errorServicio);
            }
        );
    }

  filtrar_Equipos() {
    if (this.array_Equipos.length == 0) {
            return;
        }
        let search = this.filterEquipos.value;
        if (!search) {
            this.filtered_Equipos.next(this.array_Equipos.slice());
            return;
        } else {
            search = search.toLowerCase();
        }
        this.filtered_Equipos.next(
            this.array_Equipos.filter(
                item => item.Placa.toLowerCase().indexOf(search) > -1
            )
        );
  }

  changeModulo(eve, item) {
    if (eve.source.selected) {
      this.mantenimientoservice.getSubTipoOrden(item).subscribe( (data: any) => {
        this.SubTipos = data;
        this.SubTipos.unshift({ SubTipoOrden: 0, Descripcion: 'TODOS' })
        this.formBusqueda.controls.SubTipo.setValue(0);
        // this.form.controls.SubTipo.setValue(1);
      }
    );
    }
  }

  getMainList(){ 
       
    const _controls = this.formBusqueda.controls;
      if (this.formBusqueda.invalid) {
        Object.keys(_controls).forEach(controlName => _controls[controlName].markAsTouched() );

        this.toastr.warningToastr('Ingrese los campos obligatorios.', 'Advertencia!', {
          toastTimeout: 2000,
          showCloseButton: true,
          animate: 'fade',
          progressBar: true
        });
      }else{
        this.searchBan = false;
        this.load_data = false;
        this.no_data = true;
        let Equipo = _controls['Equipo'].value;
        let TipoPunto = _controls['TipoPunto'].value;
        let UnidadMedida = _controls['UnidadMedida'].value; 

        this.mantenimientoservice.getDocumentosMedidaVehiculo(Equipo,TipoPunto,UnidadMedida).subscribe(
          (data: any) => {
            this.arrayList = data;
            this.listData = new MatTableDataSource(data);
            this.listData.sort = this.MatSort;
            this.listData.paginator = this.paginator;
            this.no_data = data.length>0? true:false;
            this.load_data = true;
            // this.loading=false;
          }
        )
      }
    
  }

  AddEditMedicionVehiculo(Id){ 
    console.log("IDDD",Id);
    {const dialogRef = this.utilsService.addEditMedicionVehiculoDialog(Id==0?'Registrar medición vehículo':'Editar medición vehículo', Id);
        dialogRef.afterClosed().subscribe(res => {
      debugger
            if (res) { this.getMainList(); return; }
      else { return; }
    });}
  }

  enabledisabled(id: number,estado: boolean){ 
    
    console.log("nuevo estado para:",id,estado);
    let accion = estado==true?'Activar':'Desactivar';
    let ejecutando = estado==true?'Activando':'Desactivando';
    let data: any = {
      title :  accion +' Documento de Medicion Vehículo',
      description : '¿Esta seguro de '+accion+' Documento de Medicion del vehículo?',
      waitDescription : ejecutando+' ...',
      labelYes : accion
    };
    
    data.callback = (data): Observable<any> => {
      return new Observable(obs => {
        this.mantenimientoservice.DocumentoMedicionVehiculoEnabledDisabled(id,estado).subscribe((response: any) => { 
          console.log("response",response);
            if (response==1) {
              this.toastr.successToastr(response.Message, 'Éxito!', {
                toastTimeout: 2000,
                showCloseButton: true,
                animate: 'fade',
                progressBar: true
              });
              obs.next(true);
            } else {
              this.toastr.errorToastr(response.Message, 'Error!', {
                toastTimeout: 2000,
                showCloseButton: true,
                animate: 'fade',
                progressBar: true
              });
              obs.next(false);
            }
          }, (error) => {
            this.toastr.errorToastr(error.error.Message, 'Error!', {
              toastTimeout: 2000,
              showCloseButton: true,
              animate: 'fade',
              progressBar: true
            });
            obs.next(false);
          });
      });
    }
  
    const dialogRef = this.utilsService.confirmCallback(data);
    dialogRef.afterClosed().subscribe(res => { console.log("respuesta de dialog"+res);
      if (!res) {
        return;
      } else {
        this.getMainList();
      }
    });
  }

  formatNumber(n: number){
    console.log(n)
    var val = n.toFixed(3);
    var parts = val.toString().split(".");
    var num = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + (parts[1] ? "." + parts[1] : "");

    return num;
  }
  
  searchInsideTable() {

    var searchKey=this.formBusqueda.controls['searchKey'].value;
    this.listData.filter = searchKey.trim().toLowerCase();
  }

} 

1 respuesta 1

0

SOLUCIONADO

Lo he solucionado, el problema era tener mal llamado al matColumnDef; debe ser el mismo nombre cómo se llama desde el backend, lo que está entre paréntesis {{ ... }}

Antes:

 displayedColumns: string[] = ['N','Equipo','UnidadMedida','TipoPunto',
'Descripcion','Activo','FechaMedida','Operaciones'];
<!-- ... -->
<ng-container matColumnDef="Equipo">
 <mat-header-cell *matHeaderCellDef mat-sort-header 
 class="head_back">Equipo</mat-header-cell>
 <mat-cell *matCellDef="let lesson">{{lesson.EquipoDisplay}}</mat-cell>
</ng-container>
<!-- ... -->

Después:

displayedColumns: string[] = ['N','EquipoDisplay','UnidadMedidaDisplay',
'TipoPuntoDisplay','DescripcionDisplay','ActivoDisplay',
'FechaMedidaDisplay','Operaciones'];
<!-- ... -->
<ng-container matColumnDef="EquipoDisplay">
 <mat-header-cell *matHeaderCellDef mat-sort-header 
 class="head_back">Equipo</mat-header-cell>
 <mat-cell *matCellDef="let lesson">{{lesson.EquipoDisplay}}</mat-cell>
</ng-container>
<!-- ... -->

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.