找不到管道“异步" [英] The pipe 'async' could not be found

问题描述

我正在尝试使用Angular 2和Firebase构建一个简单的博客，并且在组件中使用异步管道时遇到了问题.我在控制台中收到错误.

I am trying to build a simple blog with Angular 2 and Firebase and I am having issues using async pipe in component. I get the error in the console.

zone.js:344未处理的承诺拒绝:模板解析错误: 找不到管道异步"("

zone.js:344Unhandled Promise rejection: Template parse errors: The pipe 'async' could not be found ("

[错误->] {{(blog.user | async)?. first_name}}

[ERROR ->]{{ (blog.user | async)?.first_name }}

"):BlogComponent @ 6:3;区域:；任务:Promise.then;值:错误:模板解析错误:(…)错误:模板解析错误: 找不到管道异步"("

"): BlogComponent@6:3 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: The pipe 'async' could not be found ("

blog.component.ts

blog.component.ts

import {Component, Input} from "@angular/core";

@Component({
  selector: 'blog-component',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css'],
})

export class BlogComponent {
  @Input() blog;
}

blog.component.html

blog.component.html

<h1 class="article-title">{{ blog.title }}</h1>

<p>{{ (blog.user | async)?.first_name }}</p>

app.component.ts

app.component.ts

import { Component } from '@angular/core';
import { BlogService } from "./services/services.module";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  constructor(private blogService: BlogService) {}
  articles = this.blogService.getAllArticles();
}

app.component.html

app.component.html

<article *ngFor="let article of articles | async">
<blog-component [blog]="article"></blog-component>
</article>

blog.service.ts

blog.service.ts

import {Injectable} from "@angular/core";
import {AngularFire} from "angularfire2";
import {Observable} from "rxjs";
import "rxjs/add/operator/map";


@Injectable()
export class BlogService {

  constructor(private af: AngularFire) { }

  getAllArticles(): Observable<any[]> {
    return this.af.database.list('articles', {
      query: {
        orderByKey: true,
        limitToLast: 10
      }
    }).map((articles) => {
      return articles.map((article) => {
        article.user = this.af.database.object(`/users/${article.user_id}`);
        return article;
      });
    });
  }
}

仅当我尝试在blog.component.html文件中使用异步时，才会出现此问题.如果我尝试在app.component.html文件中打印用户名，它将起作用.我应该在blog.module.ts中注入AsyncPipe吗?如何在blog.component.ts中使异步工作?

The problem arises only when i try to use async in blog.component.html file. It works if I try to print the user name in app.component.html file. Should I be injecting AsyncPipe in blog.module.ts? How can I get the async working in blog.component.ts?

推荐答案

@NgModule.declarations未被子模块继承.如果需要模块中的管道，指令，组件，则应将该模块导入功能模块.

@NgModule.declarations aren't inherited by child modules. If you need pipes, directives, components from a module, the module should be imported into your feature module.

具有所有核心管道的模块是@angular/common

The module with all the core pipes is CommonModule from @angular/common

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [ CommonModule ]
})
class BlogModule {}

它在app.component中起作用的原因是，您很可能将BrowserModule导入到AppModule中. BrowserModule重新导出CommonModule，因此通过导入BrowserModule就像导入CommonModule.

The reason it works in the app.component is because you are most likely importing BrowserModule into the AppModule. BrowserModule re-exports CommonModule, so by importing BrowserModule, it's like also importing CommonModule.

还值得注意的是，CommonModule也具有核心指令，例如ngFor和ngIf.因此，如果您有一个使用这些功能模块的功能模块，则还需要将CommonModule导入到该模块中.

It's also worth noting that CommonModule has the core directives also, like ngFor and ngIf. So if you have a feature module that uses those, you will also need to import the CommonModule into that module.

这篇关于找不到管道“异步"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！