如何使用这些标志上方的表单输入来过滤下方的标志？
https://stackblitz.com/edit/angular-ivy-s2ujmr?file=src/app/country-card/country-card.component.html
我想我可以像这样在管道中使用filter函数：

searchFilterCountries(searchTerm: string){
    this.countries$.pipe(filter((country: any) => country.name.common.toLowerCase().includes(searchTerm.toLowerCase())))
  }

并将输入放入html模板中，如下所示：

<input type="text" class="form-control" (input)="searchFilterCountries($event.target.value)"/>

以便每次有输入时过滤器函数都会触发，从而缩小显示的国家列表。
但是这个方法行不通。如果这个方法行得通，请解释我做错了什么。
经过几天的谷歌搜索和阅读，我想出了这样的帖子

主页.组件.html

<div>
  <input type="text" [formControl]="myControl" />
  <app-country-card *ngFor="let country of countries$ | async" [country]="country"></app-country-card>
</div>

主页.组件.ts

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$ = this.myControl.valueChanges.pipe(
      startWith(''),
      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));
  }
}

但这也不起作用。页面保持空白，没有标志加载/呈现，直到输入的东西。我需要所有的结果呈现，然后能够过滤他们。
我是Angular的新手，这比我预期的要困难得多。我花了几天时间试图让它工作，但不能再花时间了。我迫切需要帮助。有人能告诉我我做错了什么，以及如何解决这个问题吗？