如何通过 API 以角度搜索元素？

Question

我已经实现了角度模板，并且通过 *ngFor 在 div 中显示迭代数据。我想搜索特定的元素。我正在尝试使用过滤器，但它对我不起作用。可能是我通过 API 调用显示数据，这就是搜索不起作用的原因。我是 Angular 2 的新手。

API：https://rickandmortyapi.com/api/character/

app.component.ts

import { Component,OnInit  } from '@angular/core';
import { ApiService } from './api.service';
import { DatePipe} from './date.pipe';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'demo';
  searchText;
  constructor(private apiService: ApiService){}
  ngOnInit(){
    this.apiService.apiCall().subscribe((data)=>{
      console.warn("get",data.results);
      this.data=data;     
    })
  }

}

app.component.html

 <div class="row">
    <div class="col-md-3" style="background-color: black;" *ngFor="let data of data.results">
      <div class="col-md-12 " style="background-color:rgba(125, 123, 123, 0.83);padding:0px;margin-top:20px;">
        <div class="text-image">
          <img [src]="data.image" class="img-fluid" style="border-radius: 5px 5px 5px 5px;">
          <div class="bottom-left text-left" style="background-color: #0c0c0c;padding:13px;">
            <div>{{data.name}}</div>
            <div style="font-size:12px">
              <span>id: {{data.id}} </span> -  <span>  created 
                {{data.created | DateFilter}} years ago</span>
            </div>            
          </div>
        </div>
        <table style="font-size: 11px;">
          <tr>
            <td style="color:rgb(197, 194, 194)"><strong>STATUS</strong></td>
            <td style="color: #ea8c2a;"><strong>{{data.status}}</strong></td>
          </tr>
          <tr>
            <td style="color:rgb(197, 194, 194)"><strong>SPECIES</strong></td>
            <td style="color: #ea8c2a;"><strong>{{data.species}}</strong></td>
          </tr>
          <tr>
            <td style="color:rgb(197, 194, 194)"><strong>GENDER</strong></td>
            <td style="color: #ea8c2a;"><strong>{{data.gender}}</strong></td>
          </tr>
          <tr>
            <td style="color:rgb(197, 194, 194)"><strong>ORIGIN</strong></td>
            <td style="color: #ea8c2a;"><strong>{{data.origin.name}}</strong></td>
          </tr>
          <tr>
            <td style="color:rgb(197, 194, 194)"><strong>lOCATION</strong> </td>
            <td style="color: #ea8c2a;"><strong>{{data.location.name}}</strong></td>
          </tr>
        </table>
      </div>
    </div>
  </div>

api.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private httpClient: HttpClient) {}
  apiCall(){
      return this.httpClient.get('https://rickandmortyapi.com/api/character/');
  }
}

style.css

table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  .text-image {
    position: relative;
    text-align: center;
    color: white;
  }
  
  .bottom-left {
    position: absolute;
    bottom: 0px;
    opacity: 0.8;
    width:100%
    
  }

假设我将按名称搜索，那么它应该只出现特定的 div。

我检查了这个链接，但它不起作用： Angular 2 filter/search list

Answer 1

这是Demo

你可以用管道解决

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

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

 
 public transform(value: any[], filterText: string) {

    return filterText.length>3 ? value.filter(x=> x.name.toLowerCase().includes(filterText.toLowerCase())): value
  }
}