Angular 没有工作管道进行搜索

我创建用于搜索的管道。当用户从selectbox中选择complete时，它会显示完整的产品；当选择uncomplete时，它会显示uncomplete产品，但当我使用此代码时，它不会显示此错误：

未处理的承诺拒绝：模板分析错误： 找不到管道“SearchCompletePipe”（“ ]任务的任务| SearchCompletePipe:SearchCompletePipe；让索引=索引“[task]=”任务“>加载。 这是我的代码：

管道：

    import { Pipe, PipeTransform } from '@angular/core';
import { Task } from '../task/task-list/task';

@Pipe({
    name: 'search-complete'
})

export class SearchCompletePipe implements PipeTransform {

    transform(tasks: Task[], args?: any): any {

        if (!tasks) {
            return tasks;
        }

        let complete = args[0];
        return tasks.filter((task: Task) => task.complete == complete)

    }

}

任务列表：

    import { Component, OnInit,Output } from '@angular/core';
import { Task } from './task';

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent implements OnInit {

    complete: boolean = false;
    @Output() tasks: Task[];
    constructor() {
        this.tasks = [
            new Task(1, "Site Design", "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci autem consequuntur ea exercitationem fuga, illo impedit ipsam itaque magnam mollitia nihil quam quibusdam repellendus, reprehenderit totam vel. Beatae, eum.", false),
            new Task(2, "Site Design", "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci autem consequuntur ea exercitationem fuga, illo impedit ipsam itaque magnam mollitia nihil quam quibusdam repellendus, reprehenderit totam vel. Beatae, eum.", false),
            new Task(3, "Site Design", "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci autem consequuntur ea exercitationem fuga, illo impedit ipsam itaque magnam mollitia nihil quam quibusdam repellendus, reprehenderit totam vel. Beatae, eum.", false),
            new Task(4, "Site Design", "Lorem ipsum dolor sit amet, consectetur adipisicing elit. A adipisci autem consequuntur ea exercitationem fuga, illo impedit ipsam itaque magnam mollitia nihil quam quibusdam repellendus, reprehenderit totam vel. Beatae, eum.", false),

        ];
    }

  ngOnInit() {
  }

}

task.html：

<app-task-item 
               *ngFor="let task of tasks | complete:SearchCompletePipe ; let index=index"
               [task]="task"
               >Loading . . .</app-task-item>

<td class="col-lg-1">{{task.id}}</td>
<td class="col-lg-2">{{task.name}}</td>
<td class="col-lg-6">{{task.description}}</td>
<td class="col-lg-3">
  <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-xs btn-info">edit</button>
    <button type="button" class="btn btn-xs btn-danger">delete</button>
    <button type="button" class="btn btn-xs btn-success">done</button>
  </div>
</td>

task.html：

<app-task-item 
               *ngFor="let task of tasks | complete:SearchCompletePipe ; let index=index"
               [task]="task"
               >Loading . . .</app-task-item>

<td class="col-lg-1">{{task.id}}</td>
<td class="col-lg-2">{{task.name}}</td>
<td class="col-lg-6">{{task.description}}</td>
<td class="col-lg-3">
  <div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-xs btn-info">edit</button>
    <button type="button" class="btn btn-xs btn-danger">delete</button>
    <button type="button" class="btn btn-xs btn-success">done</button>
  </div>
</td>

{{task.id}
{{task.name}
{{task.description}
编辑
删除
完成

找不到管道

错误表示您忘记引入管道：

@NgModule({
  declarations: [
    SearchCompletePipe
  ]

---

您应该使用在管道装饰器上声明的

管道的名称

：

在您的情况下，它是

搜索完成

：

@Pipe({
  name: 'search-complete'
})

因此，在模板中

<app-task-item *ngFor="let task of tasks | search-complete: complete; let i = index"
               [task]="task">
  Loading...
</app-task-item>

<app-task-item *ngFor="let task of tasks | searchComplete: complete; let i = index"
               [task]="task">
  Loading...
</app-task-item>

模板

<app-task-item *ngFor="let task of tasks | search-complete: complete; let i = index"
               [task]="task">
  Loading...
</app-task-item>

<app-task-item *ngFor="let task of tasks | searchComplete: complete; let i = index"
               [task]="task">
  Loading...
</app-task-item>

或者，您可以像以前一样保留HTML并在管道中进行更改：

export class SearchCompletePipe implements PipeTransform {

  transform(tasks: Task[], complete: any): any { // Type complete as boolean?  
    if (!tasks) {
      return tasks;
    }

    return tasks.filter((task: Task) => task.complete === complete)    
  }    
}

---

2-不要忘记在

NgModule

中的声明数组中添加

SearchCompletePipe

，请重新阅读指南，用法不正确：@jornsharpe这是什么问题？是您的真实代码吗？查看错误并在代码中搜索，任务.html中的代码越相似，但不相等。不，它不是真的。我问了在代码中查找错误部分的问题。我添加了这个，但仍然显示错误：

声明：[AppComponent，TaskComponent，TaskListComponent，TaskItemComponent，SearchCompletePipe，TaskDetailComponent]