Angular - 找不到带有名称的管道 [英] Angular - No pipe found with name
问题描述
我使用ng g pipe"命令创建了一个管道.在我的代码中使用它时出现控制台错误.下面附上代码的截图.错误:错误 NG8004:未找到名为filterByPrcName"的管道.filter-by-prc-name.pipe.ts控制台错误消息product-list.component.html
你需要打开声明你的组件的 angular 模块,然后将其添加到声明中,并添加所需的导入.
示例:
{{product.productCode |小写 |convertToSpaces: '-' }}</td><块引用>
src/app/products/product-list.component.html 中的错误:48:61 - 错误NG8004:未找到名称为convertToSpaces"的管道.
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';从'@angular/core' 导入 { NgModule };从'@angular/forms'导入{FormsModule};从 './app.component' 导入 { AppComponent };从'./products/product-list.component'导入{ProductListComponent};import { ConvertToSpacesPipe } from './shared/convert-to-spaces.pipe';//<-- 添加这个@NgModule({声明: [应用组件,产品列表组件,ConvertToSpacesPipe//<-- 添加这个],进口:[浏览器模块,表单模块],引导程序:[AppComponent],//导出:[AppComponent],})导出类 AppModule { }
convert-to-spaces.pipe.ts
import { Pipe, PipeTransform } from '@angular/core'@Pipe({ 名称:'convertToSpaces' })导出类 ConvertToSpacesPipe 实现 PipeTransform {变换(值:字符串,字符:字符串):字符串{return value.replace(character, ' ');}}
I've created a pipe using "ng g pipe" command. I'm getting a console error when I'm using it in my code.
The screenshots of the code are attached below.
Error: error NG8004: No pipe found with name 'filterByPrcName'.
filter-by-prc-name.pipe.tsConsole Error Message
product-list.component.html
解决方案 You need to open the angular module that declares your component, then add it to the declarations, and add the needed import.
Example:
<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 { }
convert-to-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, ' ');
}
}
这篇关于Angular - 找不到带有名称的管道的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆