Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » Angular » Intento de crear filtro en datos

Angular - Intento de crear filtro en datos

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Jhon
Val: 5
Ha aumentado 1 puesto en Angular (en relación al último mes)
Gráfica de Angular

Intento de crear filtro en datos

Publicado por Jhon (4 intervenciones) el 10/04/2023 19:34:40
Hola tengo un componente en Angular 14 que tiene un conjunto de datos, la idea es dar la opción de filtrarlos por año.

Primero los puse en una tabla, pero luego encontré este post que usa una lista no ordenada:

https://azaharafernandezguizan.medium.com/c%C3%B3mo-paginar-y-ordenar-una-tabla-en-angular-f%C3%A1cilmente-ba11ccb15214

Le quité algo por que no me interesa la paginación. Instalé ng-bootstrap 13. No funciona, no hace nada, y muestra esto:


prob

¿Cómo puedo ajustarlo para que me filtre?, ¿Se puede hacer con una tabla mejor?

ts

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
import { Component, OnInit } from '@angular/core';
import { IMovie } from '../data/imovie';
import { MovieService } from '../data/movie.service';
import {NgbPaginationConfig} from '@ng-bootstrap/ng-bootstrap';
import { ActivatedRoute, Router } from '@angular/router';
 
@Component({
  selector: 'app-get-all-movies',
  templateUrl: './get-all-movies.component.html',
  styleUrls: ['./get-all-movies.component.css'],
  providers: [NgbPaginationConfig]
})
export class GetAllMoviesComponent implements OnInit {
 
  moviesList: IMovie[] = [];
  totalItems!: number;
  page!: number;
  previousPage!: number;
  showPagination!: boolean;
  path: string[] = [];
  order!: number;
 
  movie: IMovie = {
    movieId: 0,
    movieTitle: '',
    movieYear: '',
    movieGenre: ''
  };
 
  items!: any[];
 
  constructor(private movieService: MovieService,
    private route: ActivatedRoute,
    private config: NgbPaginationConfig,
    private router: Router
    ) { }
 
  ngOnInit(): void {
    this.page =1;
	  this.previousPage =1;
    this.fillMovies();
 
    this.movieService.GetAllMovies().then((response: any[]) => {
      console.log('response', response);
 
      response.forEach(function(field){
        field.movieYear = field.movieYear.slice(0, 4);
         console.log('movieYear ', field.movieYear);
      });
      this.items = response;
 
    })
    .catch((error: any) => {
      console.error(': ', error);
    })
  }
 
  loadPage(page: number) {
    if (page !== this.previousPage) {
      this.previousPage = page;
      this.fillMovies();
    }
  }
 
  fillMovies() : void {
			if ((!this.items) || (this.items && this.items.length ==0)) {
			  this.moviesList = [];
			  this.showPagination = false;
			}
			else {
			  this.moviesList = this.items;
			  this.totalItems = 5;
			  this.showPagination = false;
			}
  }
 
  sortTable(prop: string) {
    this.path = prop.split('.');
    this.order = this.order * (-1);
    return false;
  }
 
 getIcon(prop:string): string{
    var iconClass = "fa fa-sort";
 
     if(this.path.indexOf(prop) != -1)
     {
      iconClass = this.order===-1 ? 'fa fa-sort-down' : 'fa fa-sort-up';
     }
 
     return iconClass;
  }
 
}

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
<br><br>
<h2>Movies</h2>
 
<div *ngIf="items" id="main-container">
    <table>
        <thead class="thead-dark">
            <tr>
                <th scope="col">Título</th>
                <th scope="col">Año</th>
                <th scope="col">Género</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of items ">
                <td>{{ item.movieTitle}}</td>
                <td>{{ item.movieYear }}</td>
                <td>{{ item.movieGenre }}</td>
 
                <td>
                    <button type="button" class="button">
                        <a [routerLink]="['/deleteMovie', item.movieId]">Borrar</a>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
    <br><br>
</div>
<br><br>
 
<div *ngIf="items" >
    <div>
        <ul>
            <li (click) = "sortTable('title')">
                Título
                <i [class]="getIcon('title')" aria-hidden="true"></i>
            </li>
            <li (click) = "sortTable('year')">
                Año
                <i [class]="getIcon('year')" aria-hidden="true"></i>
            </li>
            <li (click) = "sortTable('gender')">
                Género
                <i [class]="getIcon('gender')" aria-hidden="true"></i>
            </li>
            <li>
                <i [class]="getIcon('action')" aria-hidden="true"></i>
            </li>
        </ul>
        <ul *ngFor="let item of items">
            <li>{{item.movieTitle}}</li>
            <li>{{item.movieYear}}</li>
            <li>{{item.movieGenre}}</li>
            <li>
                <button type="button" class="button">
                    <a [routerLink]="['/deleteMovie', item.movieId]">Borrar</a>
                </button>
            </li>
        </ul>
        <div>
            <ngb-pagination *ngIf="showPagination"
                [collectionSize]="totalItems"
                [(page)]="page"
                (pageChange)="loadPage($event)">
            </ngb-pagination>
        </div>
    </div>
    <br><br>
</div>

Así es la información que recibe del servicio:

prob2
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