Angular 4 ERROR TypeError: items.filter is not a function

Question

我确实很难理解 Angular 4 中的自定义过滤器。我知道版本有点过时，但我的项目完全是用 Angular 4 构建的，我无法更新它，因为这个月发布。请伸出援手。

我在控制台中收到此错误：

ERROR TypeError: items.filter is not a function
at FilterPipe.transform (filter.pipe.ts:14)
at Object.eval [as updateRenderer] (UploadListComponent.html:49)
at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13113)
at checkAndUpdateView (core.es5.js:12260)
at callViewAction (core.es5.js:12620)
at execEmbeddedViewsAction (core.es5.js:12578)
at checkAndUpdateView (core.es5.js:12256)
at callViewAction (core.es5.js:12620)
at execEmbeddedViewsAction (core.es5.js:12578)
at checkAndUpdateView (core.es5.js:12256)

好的。我的 UploadModule 是这样的：

 import { NgModule } from '@angular/core';
import {CommonModule} from '@angular/common';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import {UploadFromComponent} from '../uploads/shared/upload-from/upload-from.component';
import {UploadListComponent} from './shared/upload-list/upload-list.component';
import {UploadsService} from '../../shared/services/uploads.service';
import {AngularFireDatabaseModule} from 'angularfire2/database';
import {SharedModule} from './../shared/shared.module';
import { FilterPipe } from './shared/filter.pipe';
import {User} from '../../shared/services/user';


const routes: Routes = [
    {path: '', component: UploadListComponent},
    {path: 'app-upload-from', component: UploadFromComponent},
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(routes),
        NgbModule.forRoot(),
        ReactiveFormsModule,
        FormsModule,
        AngularFireDatabaseModule,
        SharedModule
    ],
    declarations: [UploadFromComponent, UploadListComponent, FilterPipe],
    providers: [UploadsService, FilterPipe, User]

})

export class UploadsModule {
}

upload.component 是

  import { Component, OnInit } from '@angular/core';
import { Upload } from '../upload';
import { UploadsService } from '../../../../shared/services/uploads.service';
import { FirebaseListObservable } from 'angularfire2/database-deprecated';
import { Pipe, PipeTransform} from '@angular/core';
import { FilterPipe } from './../filter.pipe';
import {User} from '../../../../shared/services/user';


@Component({
  selector: 'app-upload-list',
  templateUrl: './upload-list.component.html',
  styleUrls: ['./upload-list.component.scss']
})



export class UploadListComponent implements OnInit {
  secondaryPath: FirebaseListObservable<Upload[]>
  selectedFiles: FileList;
  currentUpload: Upload;
  uploads: Upload[];
  noUploads = false;
  user_key: string;
  filterdata: Array<any>;

  constructor(private uploadsService: UploadsService, public filter: FilterPipe, private user: User) { }

  ngOnInit() {
    this.user_key = localStorage.getItem('user_key');
    this.uploadsService.getUploadsto(this.user_key).subscribe(uploads => {
                this.uploads = uploads;
                if (this.uploads.length === 0) {
                    this.noUploads = true;
                } else {
                    this.noUploads = false;
                }
            })
        }

  detectFiles(event) {
    this.selectedFiles = event.target.files;
}
uploadSingle() {
  const file = this.selectedFiles.item(0);
  this.currentUpload = new Upload(file);
  this.uploadsService.pushUploadtp(this.currentUpload);
  this.currentUpload = null;
}

}

The filter.pipe.ts is this 

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

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

  export class FilterPipe implements PipeTransform {
    transform(items: Array<any>, filterdata: string): any[] {
    if (!items) {return []; }
    if (!filterdata) {return items; }
     console.log(filterdata);
     filterdata = filterdata.toString().toLowerCase();
     return items.filter( it => {
       console.log(it);
       return it.name.toLowerCase().includes(filterdata);
      });
    }
   }

在此处上传-list.html：

<div class="row">
  <div class="col-xl-10 text-xs-center">
      <div class="card card-default">
          <div class="card-header card-default">
              Fisiere
          </div>
          <div class="card-block">
              <div *ngIf="currentUpload">
                  <progress class="progress is-success" min=1 max=100
                            value="{{ currentUpload?.progress }}"></progress>

                  Progress: {{currentUpload?.name}} | {{currentUpload?.progress}}% Complete
              </div>

              <div *ngIf="noUploads">
                Se pare ca nu exista fisiere incarcate
            </div>



              <hr>

              <div class="card card-default">
                  <div class="card-block">
                      <h6>Upload new file</h6>
                      <label>
                          <input type="file" class="btn btn-secondary" (change)="detectFiles($event)">
                      </label>

                      <button class="btn btn-primary"
                              [disabled]="!selectedFiles"
                              (click)="uploadSingle()">
                          Upload
                      </button>
                  </div>
              </div>

          </div>

      </div>
  </div>
  <div *ngIf="uploads" class="mini-container">
        <div>
            <input type="text" [(ngModel)]="filterdata" placeholder="Cauta aici" class="col-xs-10 text-xs-center" name="filterdata"/>
        </div>
        <div class="cards">
    <div class="cardsp" *ngFor="let upload of uploads">
        <div class="card__inner">
          <span><a href="{{upload.url}}">{{upload.name | filter: filterdata }}</a></span>
          <i class="fa fa-folder-o"></i>
        </div>
      </div>
    </div>
</div>
</div>

关键是在网络上搜索答案没有帮助。最合适的答案就像 "You try to return an object of an array while trying to return an array"。我不太擅长 vanilla JS 或 TS 对我来说有点难以理解。如果您可以提供有关此错误的示例或解释，请提供帮助。我确实需要做过滤器并且看不到我缺少的东西。

需要检索和过滤的列表在 firebase 上。我不知道如何以过滤器能够获取数据并对其进行过滤的方式声明该数组。

Answer 1

您正在 upload.name 上应用过滤器，因此除非 upload.name 是一个数组，否则您将收到错误消息。

<span><a href="{{upload.url}}">{{upload.name | filter: filterdata }}</a></span>

我认为您应该在 uploads 上应用过滤器，例如：

<div class="cardsp" *ngFor="let upload of uploads | filter : filterdata">

但随后您需要将 FilterPipe 修改为

transform(items: Array<any>, filterdata: string): any[] {
    if (!items) {return []; }
    if (!filterdata) {return items; }
    filterdata = filterdata.toString().toLowerCase();
    return items.filter( it => {
        //return it.name.toLowerCase().includes(filterdata);
        return it.upload.name.toLowerCase().includes(filterdata);
    });
}

Angular 4 ERROR TypeError: items.filter is not a function

Angular 4 ERROR TypeError: items.filter is not a function

angular

firebase

firebase-realtime-database

angular4-forms