Angular

Question

我使用 "ng g pipe" 命令创建了一个管道。在我的代码中使用它时出现控制台错误。代码的屏幕截图附在下面。错误：错误 NG8004：找不到名称为 'filterByPrcName' 的管道。 filter-by-prc-name.pipe.tsConsole Error Message product-list.component.html

Answer 1

您需要打开声明组件的 angular 模块，然后将其添加到声明中，并添加所需的导入。

示例：

 <td>{{product.productCode | lowercase | convertToSpaces: '-' }}</td>

ERROR in src/app/products/product-list.component.html:48:61 - error NG8004: No pipe found with name 'convertToSpaces'.

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { ProductListComponent } from './products/product-list.component';
import { ConvertToSpacesPipe } from './shared/convert-to-spaces.pipe'; // <-- Add this

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent,
    ConvertToSpacesPipe  // <-- Add this
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  bootstrap: [AppComponent],

  //exports: [AppComponent],

})
export class AppModule { }

转换为spaces.pipe.ts

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

@Pipe({ name: 'convertToSpaces' })

export class ConvertToSpacesPipe implements PipeTransform {

    transform(value: string, character: string): string {
        return value.replace(character, ' ');
    }

}

Answer 2

如果您的组件不在其父模块的声明数组中，您也会收到此错误。

Answer 3

我花了很长时间试图在修改其他人实现的代码时解决这个问题，努力研究我在 app.module.ts 中遗漏的内容，如果最新版本的 Angular 改变了一些东西，最后我发现代码库中除了app.module.ts.

还有一个'module'

当我终于弄清楚这一点并根据的回答修改代码，包括在另一个模块而不是 app.module.ts 中进行管道声明时，它终于奏效了 - 呸！

Angular - 未找到具有名称的管道

Angular - No pipe found with name

web-frontend

angular-pipe

angular8

angular9