-1

我为搜索创建管道。when user select complete from selectbox it show complete products and when select the uncomplete show uncomplete product but when i use this code it not show me this Error :

未处理的承诺拒绝：模板解析错误：找不到管道“SearchCompletePipe”（“]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() {
  }

}

任务.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() {
    }

}

任务.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>
4

2 回答 2

0

The pipe could not be found错误表示您忘记引入它：

@NgModule({
  declarations: [
    SearchCompletePipe
  ]
于 2017-06-24T15:02:05.460 回答
0

您应该使用在Pipe装饰器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 在 decorator 的元数据上不接受特殊字符（如破折号、下划线等name ）。@Pipe

解决方案？

使用驼峰式。所以，而不是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（在您的转换函数上），但您传递的是单个变量。为了使它工作，你可以用括号包裹完整的参数，像这样（并保持管道像以前一样）：

<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 - 不要忘记SearchCompletePipe在您的声明数组中添加NgModule.

于 2017-06-24T19:13:21.097 回答