Question

在浏览器控制台中出现这样的错误：

ERROR Error: Uncaught (in promise): TypeError: items.filter is not a function
TypeError: items.filter is not a function
at FilterByFieldPipe.push../src/app/pipes/filter-by-field.ts.FilterByFieldPipe.transform (filter-by-field.ts:11)
at TaskListComponent.push../src/app/components/tasks/list.ts.TaskListComponent.refreshPipes (list.ts:139)
at TaskListComponent.push../src/app/components/tasks/list.ts.TaskListComponent.refreshTasks (list.ts:129)
at list.ts:29
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at Object.onInvoke (core.js:3654)
........

来自此文件。

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

@Pipe({
  name: 'filterByField',
  pure: false
})

export class FilterByFieldPipe implements PipeTransform {
  transform(items, key, value) {
    if (items) {
      return items.filter((item) => item[key] === value);
    }
  }
}

元素已创建，我可以看到它们，问题是它们没有一起输出。

这是模型文件：

app.module.ts

import { BrowserModule }              from '@angular/platform-browser';
import { NgModule }                   from '@angular/core';
import {
ReactiveFormsModule,
FormsModule,
FormBuilder,
FormGroup,
Validators
}                                     from '@angular/forms';
import { HttpModule }                 from '@angular/http';
import { environment }                from '../environments/environment';
import { APP_CONFIG, appConfig }      from './app.config';
import { AppRoutingModule }           from './app.routes';
import { AuthService }                from './services/auth';
import { TaskService }                from './services/task';
import { AppComponent }               from './components/app';
import { LoginComponent }             from './components/login';
import { NavbarComponent }            from './components/navbar';
import { InlineEditComponent }        from './components/inline-edit';
import { RegistrationComponent }      from './components/registration';
import { ConfirmEmailComponent }      from './components/confirm-email';
import { AdminComponent }             from './components/admin';
import { TasksComponent }             from './components/tasks';
import { TaskListComponent }          from './components/tasks/list';
import { TaskFormComponent }          from './components/tasks/form';
import { TasksDetailComponent }       from './components/tasks/detail';
import { TasksDetailInlineComponent } from './components/tasks/detail-inline';
import { TaskEditComponent }          from './components/tasks/edit';
import { SimpleNotificationsModule }  from 'angular2-notifications';
import { MyDatePickerModule }         from 'mydatepicker';
// import { NgbModule }                  from '@ng-bootstrap/ng-        bootstrap';
import './rxjs-extensions';
import { BrowserAnimationsModule }    from '@angular/platform-browser/animations';


@NgModule({
declarations: [
AppComponent,
LoginComponent,
RegistrationComponent,
ConfirmEmailComponent,
NavbarComponent,
AdminComponent,
TasksComponent,
TaskListComponent,
TaskFormComponent,
TasksDetailComponent,
TasksDetailInlineComponent,
InlineEditComponent,
TaskEditComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
FormsModule,
HttpModule,
AppRoutingModule,
SimpleNotificationsModule.forRoot(),
BrowserAnimationsModule,
MyDatePickerModule/*,
NgbModule.forRoot()*/
],
providers: [
AuthService,
TaskService,
FormBuilder,
Validators,
{ provide: APP_CONFIG, useFactory: appConfig }
],
bootstrap: [ AppComponent ]
})

export class AppModule {}

Answer 1

在您的if语句中，检查项目是否等于数组。没有它，当您在错误类型的数据上使用管道时，您将收到错误消息。

您可以通过比较items.constructor === Array或仅添加items: array<any>来实现。

我建议您升级项目的版本。仅仅因为该项目的版本太旧，您正在寻找或将要寻找的许多答案可能对您不起作用。

角度错误，类型错误：items.filter不是函数

1 个答案: