Свойство searchText не существует для типа AppComponent

Question

День 2 изучения Angular 9, и я пытаюсь реализовать конвейер фильтров, который позволит мне ограничить количество данных, отображаемых в моем представлении, путем фильтрации по объектам типа name из Person. У меня есть класс модели с такой структурой:

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

У меня есть мой app.component.html как показано ниже:

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

И мой app.module.ts выглядит следующим образом:

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.

Я подошел к этому, определив searchText в AppComponent как searchText: any; просто чтобы обойти проблему, и очевидно, что это не решение. Мы будем очень благодарны за любые указатели.

Я имею в виду этот блог по созданию каналов фильтра.

Answer 1

Файл app.component.ts должен иметь определение searchText в классе компонента. Я добавил public searchText: Person['name'];, и все работает.