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:
¿Cómo puedo ajustarlo para que me filtre?, ¿Se puede hacer con una tabla mejor?
ts
html
Así es la información que recibe del servicio:
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:
¿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:
Valora esta pregunta
0