我想对您当前的代码进行扩展，并建议进行如下更改：

export class HomeComponent {
  allCountries: Country[] = [];
  countries$!: Observable<Country[]>;
  myControl = new FormControl('');
  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.apiService
      .getAllCountries()
      .subscribe((countries) => (this.allCountries = countries));

    this.countries$ = combineLatest({
      searchTerm: this.myControl.valueChanges.pipe(startWith('')),
      countries: this.apiService
        .getAllCountries()
        .pipe(tap((countries) => (this.allCountries = countries))),
    }).pipe(map(({ searchTerm }) => this._filter(searchTerm)));
  }

  private _filter(value: string | null): Country[] {
    if (value === null) {
      return this.allCountries;
    }
    const filterValue = value?.toLowerCase();

    return this.allCountries.filter((country) =>
      country.name.common.toLowerCase().includes(filterValue)
    );
  }
}

因此，我们将原始的国家列表保存在一个单独的变量中，并使用表单控件的valueChange事件来筛选需要显示的国家。
模板应如下所示：

<input type="text" [formControl]="myControl" />

<div *ngFor="let country of countries$ | async">
  <div>Name: {{ country.name.common }}</div>>
</div>

管道示例

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

@Pipe({
  name: 'filterList',
})
export class FilterListPipe implements PipeTransform {
  transform(countries: Country[]|null, searchText: string): Country[] {
    if(!countries) return []
    return countries.filter(country=>country.name.indexOf(searchText) != -1);
  }
}

app.component.html

<form [formGroup]="controlsGroup">
  <input type="text" formControlName="searchInput"/>

  <div *ngFor="let country of countries | async | filterList:searchText">
    <div>Name: {{country.name}}</div>
    <div>Ranking: {{country.ranking}}</div>
    <div>Metric: {{country.metric}}</div>
  </div>
</form>

app.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { Observable, of } from 'rxjs';
import { Country } from './country';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'piper-example-app';
  searchText = ''

  controlsGroup: FormGroup

  constructor(public fb:FormBuilder){
    this.controlsGroup = fb.group({
      searchInput: new FormControl('')
    })

    this.controlsGroup.get('searchInput')?.valueChanges.subscribe(value => this.searchText=value)
  }

  countries: Observable<Country[]> = of([{
    name: 'United States of America',
    ranking: 1,
    metric: 'burgers per capita'
  },
  {
    name: 'China',
    ranking: 9000,
    metric: 'power level lower bound'
  }])
}

诚然，我在这里做了一些“肮脏”的事情，过滤传入的国家数组流可能会更有效一些。还要注意，您仍然需要扩展filter函数来检查所有属性（可以使用for（prop in obj）类型循环来迭代所有属性，以查看是否有任何属性匹配searchText，或者根据需要调整条件。
这个完整的示例显示了过滤器部分，其中不同类型的属性的过滤方式略有不同：
过滤器列表.pipe.ts（可选）

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

@Pipe({
  name: 'filterList',
})
export class FilterListPipe implements PipeTransform {
  transform(countries: Country[]|null, searchText: string): Country[] {
    if(!countries) return []
    return countries.filter(country => {
      let foundMatch = false;
      let property: keyof typeof country
      for(property in country) {
        if(typeof country[property] === 'string') {
          if((country[property] as string).indexOf(searchText) != -1)
          foundMatch = true
        }else {
          if((country[property] as number) == parseInt(searchText))
          foundMatch = true
        }
      }
      return foundMatch
    });
  }
}