类型“ AppComponent”上不存在属性“ searchText”

Day 2 on learning Angular 9 and I'm trying to implement a filter pipe that will allow me to limit the number of data displayed on my view by filtering by name of Person type objects. I have a model class with this structure:

export class Person {
  constructor(
    public name: string,
    public description: string,
  ) { }
}

I have my app.component.html as the following:

<div class="searchbox">
  <input type="search" [(ngModel)]="searchText" placeholder="Search people">
</div>
<div class="people">
  <ul>
    <li *ngFor="let person of peopleList | filter: searchText"
      [class.selected]="person === selectedPerson"
      (click)="onSelect(person)">
      {{person.name}}
    </li>
  </ul>
</div>

And I have my app.module.ts as follows:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import {PeopleApiService} from './people/people-api.service';
import { FilterPipe } from './pipes/filter.pipe';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    FilterPipe,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [PeopleApiService],
  bootstrap: [AppComponent]
})
export class AppModule { }

我定义了我的管道，如下所示：

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

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

  transform(items: any[], searchText: string): any[] {
    if (!items) {
      return [];
    }
    if (!searchText) {
      return items;
    }
    searchText = searchText.toLocaleLowerCase();

    return items.filter(it => {
      return it.name.toLocaleLowerCase().includes(searchText);
    });
  }
}

我得到的错误是：

ERROR in src/app/app.component.html:21:37 - error TS2339: Property 'searchText' does not exist on type 'AppComponent'.

    21   <input type="search" [(ngModel)]="searchText" placeholder="Search people">
                                           ~~~~~~~~~~

      src/app/app.component.ts:9:16
        9   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component AppComponent.
    src/app/app.component.html:21:48 - error TS2339: Property 'searchText' does not exist on type 'AppComponent'.

    21   <input type="search" [(ngModel)]="searchText" placeholder="Search people">
                                                      ~~~~~~

      src/app/app.component.ts:9:16
        9   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component AppComponent.
    src/app/app.component.html:33:53 - error TS2339: Property 'searchText' does not exist on type 'AppComponent'.

    33     <li *ngFor="let person of peopleList | filter: searchText"
                                                           ~~~~~~~~~~

      src/app/app.component.ts:9:16
        9   templateUrl: './app.component.html',
                         ~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component AppComponent.

I approached this by defining searchText in AppComponent as searchText: any; just to bypass the problem and obviously that is not the solution. Any pointers would be much appreciated.

I am referring to this blogpost on creating filter pipes.