Question

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

未处理的承诺拒绝：模板解析错误：找不到管道'SearchCompletePipe'（“ 任务任务| SearchCompletePipe：SearchCompletePipe; let index = index“[task] =”task“＆gt; 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 装饰器上声明的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 @Pipe 装饰者。

<强>解决方案吗

使用 camelCase 。因此，代替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。

不工作管道搜索

2 个答案: