Filtrowanie danych pobieranych z bazy danych

0

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>

0

Wydaje mi się, że exception dość jasno opisuje, gdzie tkwi problem 😉

1 użytkowników online, w tym zalogowanych: 0, gości: 1