篩選器不工作：錯誤無法讀取null的屬性“toLowerCase”

我有一個小的過濾搜索程序，我通過spring API從MySQL數(shù)據(jù)庫中提取數(shù)據(jù)。一切都很好，但是自從我在list-expense.component.ts中實現(xiàn)了filterExpenses()方法之后，我得到了一個錯誤

“TypeError:無法讀取null的屬性'toLowerCase'”

它指出錯誤在于：

return e.expense.toLowerCase().includes(this.filters.keyword.toLowerCase());

如何消除這個錯誤我沒有成功。

如果有人能幫我，我會很感激的。

expense.ts (service)

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Expense } from '../models/expense';
import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class ExpenseService {
  private getUrl: string = 'http://localhost:8080/api/v1/expenses';
  constructor(private httpClient: HttpClient) {}

  getExpenses(): Observable<Expense[]> {
    return this.httpClient
      .get<Expense[]>(this.getUrl)
      .pipe(map((response) => response));
  }

  getExpense(id: number): Observable<Expense> {
    return this.httpClient
      .get<Expense>(`${this.getUrl}/${id}`)
      .pipe(map((response) => response));
  }
}

list-expense.component.ts

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Expense } from 'src/app/models/expense';
import { ExpenseService } from 'src/app/services/expense.service';

@Component({
  selector: 'app-list-expense',
  templateUrl: './list-expense.component.html',
  styleUrls: ['./list-expense.component.css'],
})
export class ListExpenseComponent implements OnInit {
  filters = {
    keyword: '',
  };
  expenses: Expense[];
  constructor(private expenseService: ExpenseService) {}

  ngOnInit(): void {
    this.listExpenses();
  }

  listExpenses() {
    this.expenseService
      .getExpenses()
      .subscribe((data) => (this.expenses = this.filterExpenses(data)));
  }

  filterExpenses(expenses: Expense[]) {
    return expenses.filter((e) => {
      // Error on this line
      return e.expense
        .toLowerCase()
        .includes(this.filters.keyword.toLowerCase());
    });
  }
}

list-expense.component.html

<a routerLink="/addexpense">Add Expense</a>

<input type="text" [(ngModel)]="filters.keyword" name="keyword" (input)="listExpenses()">

<div *ngFor="let expense of expenses">
  <h3>{{expense.expense}}</h3>
  <h3>{{expense.amount | currency: 'CHF'}}</h3>

  <a routerLink="/editexpense/{{expense.id}}">Edit</a>
  <button (click)="deleteExpense(expense.id)">Delete</button>
</div>
<a routerLink="/addexpense">Add Expense</a>

<input type="text" [(ngModel)]="filters.keyword" name="keyword" (input)="listExpenses()">

<div *ngFor="let expense of expenses">
  <h3>{{expense.expense}}</h3>
  <h3>{{expense.amount | currency: 'CHF'}}</h3>

  <a routerLink="/editexpense/{{expense.id}}">Edit</a>
  <button (click)="deleteExpense(expense.id)">Delete</button>
</div>