不工作管道搜索

Question

我为搜索创建了管道。当用户 select 从 select 框中完成时它显示完整的产品，当 select 未完成时显示不完整的产品但是当我使用此代码时它不显示此错误：

Unhandled Promise rejection: Template parse errors: The pipe 'SearchCompletePipe' could not be found (" ]task of tasks | SearchCompletePipe:SearchCompletePipe; let index=index" [task]="task">Loading . . .

这是我的代码：

管道：

    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>

任务项目：

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

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

    @Input() task: Task;

    constructor() { }

    ngOnInit() {
    }

}

task.html:

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

Answer 1

The pipe could not be found错误说明你忘记介绍了：

@NgModule({
  declarations: [
    SearchCompletePipe
  ]

Answer 2

您应该使用您在 Pipe decorator:

上声明的 pipe 的名称

你的情况是 search-complete:

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

所以，在模板

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

等等！它也不起作用。为什么？

因为它给出了模板解析错误。

我真的说不出原因，但我几乎可以肯定 Angular 在 name 上不接受特殊字符（如破折号、下划线等...）metada of @Pipe decorator.

解决方案?

使用驼峰式。所以，而不是 search-complete 你必须使用类似 searchComplete 的东西（它也更具可读性:)）

管道:

@Pipe({
  name: 'searchComplete'
})

模板

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

补充说明：

1 - 实际上，您将管道参数视为 array（在您的 转换函数 上），但您传递的是单个变量。为了让它工作，你可以用 brackets 包裹 complete 参数，像这样（并像以前一样保持管道）：

<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

不工作管道搜索

not work pipe for search

angular-pipe

angular