Angular 2 中的 JSON 管道不起作用

Posted 2023-03-13

【中文标题】Angular 2 中的 JSON 管道不起作用

【英文标题】：JSON pipe in Angular 2 is not working

【发布时间】：2017-03-16 07:38:04

【问题描述】：

当我尝试通过 JSON 管道传输数据时，控制台中出现以下错误：

Unhandled Promise rejection: Template parse errors:
The pipe 'json' could not be found (...

我做错了什么？

【参考方案1】：

您很可能忘记导入 CommonModule：

import  CommonModule  from '@angular/common';


@NgModule(
    ...
    imports: [ CommonModule ]
    ...
)

如 cmets 中所述，请在您使用 json 管道的模块中执行此操作。

【讨论】：

对于上下文，这需要在声明使用 json 管道的组件的模块中完成。

对于 Angular 9：确保您的组件已在模块的声明中注册。

【参考方案2】：

在我的例子中添加了CommonModule，但该组件不是任何模块声明的一部分

（我正在使用ContainerRef动态创建组件）

【讨论】：

@WasifKhalil 我将组件添加到它的模块声明中，如果你没有；没有将它添加到 app.moudle 声明中

【参考方案3】：

你的组件的父模块应该是这样的。

import NgModule from '@angular/core';
import AuditTrailFilterComponent from './components/audit-trail-filter/audit-trail-filter.component';

import CommonModule from '@angular/common'; <-- This is important !!!!

@NgModule(
  imports: [
    CommonModule, <-- This is important !!!!
  ],
  declarations: [AuditTrailFilterComponent],
  exports: [
    AuditTrailFilterComponent
  ]
)
export class AuditTrailModule 

【讨论】：

感谢您的帖子“父母”的第二个字。经过数小时的奋斗，那是我需要的灯泡时刻！

【参考方案4】：

如果您在 Lazy module 中声明您的组件并尝试将该组件添加到未导致该模块被加载的路由，也会发生这种情况。

例如。我刚刚遇到了这个错误：

children: [

     
         path: 'editor',
         loadChildren: () => from(import(/* webpackChunkName: "editor" */ '../editor/editor.module').then(m => m.EditorModule))
     ,

      
         path: 'multi-preview',
         component: MultiPreviewerComponent    // declared in Editor.module (lazy loaded)
     
]