Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » Angular » FILTRAR DATOS TABLA EN ANGULAR

Angular - FILTRAR DATOS TABLA EN ANGULAR

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

FILTRAR DATOS TABLA EN ANGULAR

Publicado por Miriam (4 intervenciones) el 19/12/2022 14:49:08
Hola.

Tengo una tabla que adjunto de imagen:


image-1

Quiero que cuando seleccione la zona o la agencia con el selector me filtre la tabla.

He intentado hacerlo mediante un pipe y una función pero no consigo que filtre. ¿Alguien tiene alguna idea?

Mi tabla html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <div>
        <div>
          <div class="badge bg-primary text-wrap">
            Este texto debe ajustarse.
          </div>
        </div>
        <div style="margin-top: 10px">
          <div class="badge bg-primary text-wrap">
            Este texto debe ajustarse.
          </div>
        </div>
        </div>
        <form class="d-flex">
          <button class="btn btn-outline"
            type="submit" routerLink='/dashboard'> <img src="assets/icons/menu.png" alt="Cerrar Sesión" height ="80" width="100"/></button>
        </form>
      </div>
    </nav>
    </header>
 
    <div>
    <section style="background-image: url('assets/img/cambiar-ruedas.png'); -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: repeat; min-height: calc(100vh);">
    <br>
 
 <div class="container-fluid">
  <div class="left" type="button" routerLink='/'> <img src="assets/icons/boton-actualizar.png" alt="Actualizar" height ="50" width="70"></div>
    <div class="right"><select class="form-select">
      <option selected>*Zonas*</option>
      <option [value]="item" *ngFor="let item of zonas">{{item}}</option>
    </select>
 
    <select class="form-select" aria-label="Default select example">
      <option selected>*Agencias*</option>
      <option [value]="item" *ngFor="let item of agencias">{{item}}</option>
    </select></div>
 
 
  <br>
  <div class="table-responsive">
        <table class="table table-primary table-striped" id="myTable">
            <thead>
              <tr>
                <th scope="col">Orden</th>
                <th scope="col">Hora</th>
                <th scope="col">Agencia</th>
                <th scope="col">Matrícula</th>
                <th scope="col">Cant.</th>
                <th scope="col">Res.</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">33333</th>
                <td>09:30</td>
                <td>Casa</td>
                <td>La Golondrina</td>
                <td>20</td>
                <td>ok</td>
              </tr>
              <tr>
                <th scope="row">55555</th>
                <td>10:15</td>
                <td>Transaher</td>
                <td>La Golondrina</td>
                <td>30</td>
                <td>ok</td>
              </tr>
            </tbody>
          </table>
 
        </div>
</div>
    </section>


Mi componente ts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-picking-orders',
  templateUrl: './picking-orders.component.html',
  styleUrls: ['./picking-orders.component.css']
})
export class PickingOrdersComponent implements OnInit {
 
  zonas = ["Zona General"];
  agencias = ["Boyaca", "Casa", "Seur"];
 
 
  constructor() { }
 
  ngOnInit(): void {
  }
 
}

Gracias!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Enrique
Val: 11
Ha mantenido su posición en Angular (en relación al último mes)
Gráfica de Angular

FILTRAR DATOS TABLA EN ANGULAR

Publicado por Enrique (8 intervenciones) el 23/01/2023 22:40:28
Supongo que tiene un dataset para cargar la tabla y lo tienes un ngFor dentro del tag tbody
Debes agregar el evento onchanged en tu select
1
2
3
4
<select class="form-select"  (change)="onChange($event.target.value)">
      <option selected>*Zonas*</option>
      <option [value]="item" *ngFor="let item of zonas">{{item}}</option>
</select>

Tu tboody deberías estar así
1
2
3
4
5
6
7
8
9
10
<tbody>
        <tr *ngFor="let item of data">
                <td scope="row">{{item.orden}}</th>
                <td>{{ite.time}}</td>
                <td >{{item.Agencia}}</td>
                <td >{{item.Matricula}}</td>
                <td >{{item.Cant}}</td>
                <td >{{item.Res}}</td>
       </tr>
  </tbody>

Y tu código debería estar así
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export class PickingOrdersComponent implements OnInit {
 
private originalData:any[] = [];
 public  zonas = ["Zona General"];
public   agencias = ["Boyaca", "Casa", "Seur"];
public data:any[] = [];
 
  constructor() {
this.loadData();
 }
 private loadData():void{
this.originalData= "Some kind of load data HERE";
}
  ngOnInit(): void {
  }
onChange(seletedValue:string) {
 this.data=[];
this.data= this.originalData.filter(item=>item["Lo_que_intentas_filtra_del_el_item_seleccionado"] == selectValue);
}
 
}

Aunque deberpia usar mejor los tables de alguna libería de UI como material o zorro
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar