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

【问题标题】：Property 'searchText' does not exist on type 'AppComponent'“AppComponent”类型上不存在属性“searchText”
【发布时间】：2020-05-09 05:11:20
【问题描述】：

学习 Angular 9 的第 2 天，我正在尝试实现一个过滤器管道，它允许我通过过滤 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.

我通过将 AppComponent 中的 searchText 定义为 searchText: any; 来解决这个问题，只是为了绕过这个问题，显然这不是解决方案。任何指针将不胜感激。

我指的是 this blogpost 创建过滤管道。

【问题讨论】：

@Pipe({ name: 'filter' }) 这不应该是name: 'searchText' 吗？另请注意，在学习 Angular 教程时，版本似乎非常重要（并非适用于所有情况），当大多数 Angular 教程已过时且无关紧要时，我发现它相当令人沮丧（可能对您而言并非如此，但值得保留记住。）
@Isolated 嗯，我认为这不是问题所在。它没有将 searchText 识别为 AppModule 范围内的字段。我应该在某个地方传递 html 的值以知道它存在。我以为我在html中放置ngModel的方式很好，但我不知道......
你在ts中定义了searchText吗？
@ArunMohan 这就是我迷路的地方。我想我是通过在 .ts 文件中定义 searchText: Person['name']; 来解决的。谢谢你。不知何故，我所指的示例应用程序从未在它们各自的 .ts 文件中的任何地方定义它们。

标签： angular typescript frontend

【解决方案1】：

app.component.ts 文件需要在组件类中有searchText 的定义。我添加了public searchText: Person['name'];，它可以工作。

【讨论】：

这是对的！如果您使用的是 Ng2SearchPipeModule，则需要在组件中定义 searchText，这样视图才能解析它。