Создание трубы фильтра в Angular 8

Question

У меня есть некоторый опыт работы с веб-разработчиком, но я очень плохо знаком с Angular. Я пытаюсь создать простой фильтр для фильтрации одного столбца таблицы на основе ввода текста. Проблема, с которой я сталкиваюсь, заключается в том, что при вводе одной буквы в текстовом поле все результаты отфильтровываются.

AnimalsComponent.ts

import { ApiService } from '../api.service';
import { AnimalFilterPipe } from '../animal-filter.pipe'

@Component({
  selector: 'app-animals',
  templateUrl: './animals.component.html',
  styleUrls: ['./animals.component.css'],
  providers: [AnimalFilterPipe]
})
export class AnimalsComponent implements OnInit {
    animals = [];
    constructor(private apiService: ApiService) { }
    ngOnInit() {
        this.apiService.getA().subscribe((data: any[])=>{  
            console.log(data);  
            this.animals = data;  
        })  
    }
}

Animals Filter Pipe

import { Pipe, PipeTransform } from '@angular/core';


@Pipe({
  name: 'animalFilter'
})
export class AnimalFilterPipe implements PipeTransform {

  transform(animals: any, term: string): any {
    //check if the search term is defined
    if(!animals || !term) return animals;

    //return updated animals array
     animals.filter(function(animal){
      return animal.Animal.toLowerCase().includes(term.toLowerCase());
    })
  }

}

Animals. html

<div style="padding: 13px;">
  <form id = "animalFilter">
    <label>Filter by Animal:</label>
    <input type="text" [(ngModel)]= "term" [ngModelOptions]="{standalone: true}"/>
  </form>
    <table>
        <tr>
            <th>Hemisphere</th>
            <th>Type</th>
            <th>Animal</th>
            <th>Seasonality</th>
            <th>Location</th>
            <th>Time</th>
            <th>Price</th>
          </tr>
        <tr *ngFor="let animal of animals | animalFilter:term">
          <td align="center">{{ animal.Hemisphere }}</td>
          <td align="center">{{ animal.Type }}</td>
          <td align="center" >{{ animal.Animal }}</td>
          <td align="center">{{ animal.Seasonality }}</td> 
          <td align="center">{{ animal.Location }}</td>
          <td align="center">{{ animal.Time }}</td>
          <td align="center" *ngIf="animal.Price; else noPrice">{{ animal.Price }} Bells</td>
          <ng-template #noPrice> 
            <td align="center">TBD</td>
          </ng-template>
        </tr>
    </table>
</div>

Если кто-нибудь может мне помочь и дайте мне несколько советов о том, что мне нужно изменить, и как я могу сделать это лучше, продвигаясь вперед, чтобы я мог создавать больше фильтрующих каналов и больше пользовательских каналов в целом.

Answer 1

Вы только что забыли оператор return в transform:

return animals.filter(animal => animal.Animal.toLowerCase().includes(term.toLowerCase()));