Приветствую вас, сообщество SO.
Я пытаюсь создать конвейер фильтра диапазона дат в Angular, извлекая данные из API, но он не работает, потому что фильтрует все данные и не отображает любой.
Я получаю данные из firebase https://loggin-app-fa0a7.firebaseio.com/data/facturas.json
Это служба, из которой я получаю данные
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class FacturasService {
constructor(private http: HttpClient) { }
getFacturas() {
return this.http.get('https://loggin-app-fa0a7.firebaseio.com/data/facturas.json');
}
}
Затем у меня есть этот канал для фильтрации данных по диапазону дат
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filtroFecha'
})
export class FiltroFechaPipe implements PipeTransform {
transform(row: any, f1: Date, f2?: Date): any {
const resultadoFiltro = [];
// si es menor a la fecha final
if (f1 >= f2 || f1 == null) {
return row;
}
// si el argumento de fecha final es invalido, se setea a la fecha actual
if (f2 == null) {
f2 = new Date();
}
// si ambos arreglos son correctos entonces se crea el nuevo arrego
for (const filteredRow of row) {
if (row.fecha >= f1 && row.fecha <= f2) {
resultadoFiltro.push(filteredRow);
}
}
return resultadoFiltro;
}
}
, и это компонент, в котором я пытаюсь применить канал
import { Component, OnInit } from '@angular/core';
import { FacturasService } from '../../services/facturas.service';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
desde = new Date('December 25, 1995 13:30:00');
hasta = new Date();
// almacena facturas
facturas: any = [];
constructor(private ventas: FacturasService) { }
ver() {
console.log('desde:', this.desde);
console.log('hasta:', this.hasta);
}
ngOnInit() {
this.ventas.getFacturas().subscribe((data: any) => {
this.facturas = data;
console.log('Facturas works');
console.log('================');
console.log(this.facturas);
});
}
}
А здесь шаблон
<!-- Header -->
<div class="my-auto">
<div class="row d-flex justify-content-center mt-2 animated fadeIn">
<p class="h1">Facturas Resientes</p>
</div>
<!-- Header -->
<!-- filtros -->
<div class="row d-flex mt-3">
<!-- date time picker component -->
<form #myForm="ngForm" novalidate class="col-6">
<input type="date" [(ngModel)]="desde" name="desde">
</form>
<form #myForm="ngForm" novalidate class="col-6">
<input type="date" [(ngModel)]="hasta" name="hasta">
</form>
</div>
<div class="row mt-3">
<button class="btn btn-danger" (click)="ver()">Ver Fecha en consola</button>
</div>
<!-- filtros -->
<!-- tabla de clientes -->
<div class="row card animated fadeIn mt-3" id="agenda">
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">Empresa</th>
<th scope="col">Monto</th>
<th scope="col">Estado</th>
<th scope="col">Fecha</th>
</tr>
</thead>
<tbody>
<!-- aplicando el pipe al ng-fo -->
<tr *ngFor="let factura of facturas |filtroFecha:desde :hasta">
<td>{{factura.empresa}}</td>
<td>{{factura.monto | currency}}</td>
<td>{{factura.estado}}</td>
<td>{{factura.fecha | date}}</td>
</tr>
</tbody>
</table>
<!-- tabla de clientes -->
, и это данные из firebase
[
{
"empresa": "Wallmark",
"estado": "pendiente",
"fecha": "Thu May 28 03:19:43 UTC 2020",
"monto": 2000
},
{
"empresa": "Corte Ingles",
"estado": "pendiente",
"fecha": "Thu May 22 03:19:43 UTC 2020",
"monto": 2345555
},
{
"empresa": "innovatek",
"estado": "pagada",
"fecha": "Thu May 28 03:19:43 UTC 2020",
"monto": 300000
},
{
"empresa": "holeee",
"estado": "pagada",
"fecha": "Thu May 28 03:19:43 UTC 2020",
"monto": 790000
},
{
"empresa": "everlast",
"estado": "pagada",
"fecha": "Thu May 28 03:19:43 UTC 2020",
"monto": 568999
}
]
, но канал фильтрует все данные и не отображается в представлении, которое я создавал раньше, но не для типа даты
Вот мой проект
https://stackblitz.com/edit/github-necjgp?file=src%2Fapp%2Fservices%2Ffacturas.service.ts
Надеюсь, вы поможете мне ТАК, сообщество: (