如何在angular中通过API搜索元素？

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

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

应用程序组件.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;     
    })
  }

}

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/');
  }
}

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%
    
  }

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>

style.css

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;     
    })
  }

}

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/');
  }
}

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

我检查了此链接，但它不工作： 这是

你可以用管道来解决

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
  }
}

---

您尝试过的搜索/筛选相关代码在哪里？即使不起作用也要加上。是的，我试过了，但没有效果。我已经创建了一个自定义管道。称为filterlist.pipe.ts。当我要进去的时候，带上*ngFor。但不起作用。在管道中，它将进行if条件转换（value1:any，args？:any）：any{if（！args）{console.log（-------------），value1）；return value1；}return value1.filter（item=>item.first_name.toLowerCase（）.indexOf（args.toLowerCase（））>-1）；}将此和相关HTML添加到问题中。您想要服务器端筛选器还是客户端筛选器？任何人。只有在输入搜索完成后才应该进行