Mam problem,
Otóż pobieram dane z Firestore do tabeli, która ma być filtrowana po wprowadzeniu żądanej wartości lub znaków, jednak coś mi nie działa. Filtrowanie wywoływane jest keyup, po wprowadzeniu danych w konsoli pojawia się błąd:
ERROR TypeError: Cannot read properties of undefined (reading 'toLowerCase')
at statystyki.component.ts:48:23
at Array.filter (<anonymous>)
at Statystykicomponent.filterKaizens (statystyki.component.ts:46:41)
at Statystykicomponent_Template_input_keyup_2_listener (statystyki.component.html:3:76)
at executeListenerWithErrorHandling (core.mjs:15679:16)
at wrapListenerIn_markDirtyAndPreventDefault (core.mjs:15714:22)
at HTMLInputElement.<anonymous> (platform-browser.mjs:459:38)
at _ZoneDelegate.invokeTask (zone.js:406:31)
at Object.onInvokeTask (core.mjs:26261:33)
at _ZoneDelegate.invokeTask (zone.js:405:60)
TS:
import { Component, OnInit, TemplateRef } from '@angular/core';
import { AngularFirestoreModule, AngularFirestoreCollection, AngularFirestore } from '@angular/fire/compat/firestore';
export interface Kaizen{
id: string;
title: string;
date: string;
employee: string;
}
@Component({
selector: 'app-statystyki',
templateUrl: './statystyki.component.html',
styleUrls: ['./statystyki.component.css']
})
export class Statystykicomponent implements OnInit {
kaizens: Kaizen[] = [];
filteredKaizens: Kaizen[] = [];
selectedKaizen: any;
constructor(private firestore: AngularFirestore, ) {}
ngOnInit() {
this.firestore
.collection('xxx')
.snapshotChanges()
.subscribe(data => {
this.kaizens = data.map(e => {
return {
id: e.payload.doc.data()['ID'],
title: e.payload.doc.data()['Title'],
date: e.payload.doc.data()['Date'],
employee: e.payload.doc.data()['Employee']
};
});
this.filteredKaizens = [...this.kaizens];
});
}
filterKaizens(event: KeyboardEvent) {
let filterValue = (event.target as HTMLInputElement).value.toLowerCase();
this.filteredKaizens = this.kaizens.filter(kaizens => {
return (
kaizens.title.toLowerCase().includes(filterValue) ||
kaizens.date.toLowerCase().includes(filterValue) ||
kaizens.id.toLowerCase().includes(filterValue) ||
kaizens.employee.toLowerCase().includes(filterValue)
);
});
}
viewKaizen(kaizens: Kaizen) {
this.selectedKaizen = kaizens;
}
closeDetail() {
this.selectedKaizen = null;
}
}
html:
<div class="kaizen-summary">
<div class="filter-section">
<input type="text" placeholder="Filter by title or date..." (keyup)="filterKaizens($event)">
</div>
<table>
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>Date</th>
<th>Employee</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let kaizens of filteredKaizens">
<td>{{ kaizens.id }}</td>
<td>{{ kaizens.title }}</td>
<td>{{ kaizens.date }}</td>
<td>{{ kaizens.employee}}</td>
<td><a (click)="viewKaizen(kaizens)">View</a></td>
</tr>
</tbody>
</table>
</div>
<ng-template #kaizenDetail let-kaizen="kaizen">
<div class="kaizen-detail">
<td>{{ kaizen.id }}</td>
<td>{{ kaizen.title }}</td>
<td>{{ kaizen.date }}</td>
<td>{{ kaizen.employee }}</td>
<button (click)="closeDetail()">Close</button>
</div>
</ng-template>