119

Angular 2 と Firebase を使用して簡単なブログを作成しようとしていますが、コンポーネントで非同期パイプを使用すると問題が発生します。コンソールにエラーが表示されます。

zone.js:344Unhandled Promise の拒否: テンプレート解析エラー: パイプ 'async' が見つかりませんでした ("

[エラー ->]{{ (blog.user | async)?.first_name }}

"): BlogComponent@6:3 ; ゾーン: ; タスク: Promise.then ; 値: エラー: テンプレート解析エラー:(…) エラー: テンプレート解析エラー: パイプ 'async' が見つかりませんでした ("

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

<h1 class="article-title">{{ blog.title }}</h1>
<p>{{ (blog.user | async)?.first_name }}</p>

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

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

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 ファイルで async を使用しようとした場合にのみ発生します。ユーザー名を app.component.html ファイルに出力しようとすると機能します。blog.module.ts に AsyncPipe を挿入する必要がありますか? blog.component.ts で非同期を機能させるにはどうすればよいですか?

4

12 に答える 12

202

@NgModule.declarations子モジュールには継承されません。モジュールからのパイプ、ディレクティブ、コンポーネントが必要な場合は、モジュールを機能モジュールにインポートする必要があります。

すべてのコアパイプを備えたモジュールCommonModuleは@angular/common

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

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

で機能する理由app.componentは、 にインポートBrowserModuleする可能性が最も高いためですAppModule。BrowserModuleを再輸出CommonModuleするので、輸入BrowserModuleすることで、輸入もするようなものCommonModuleです。

やCommonModuleなどのコア ディレクティブもあることに注意してください。したがって、それらを使用する機能モジュールがある場合は、そのモジュールに もインポートする必要があります。ngForngIfCommonModule

于 2016-09-21T20:26:23.870 に答える
7

一度に複数のインポートを変更すると、同じ問題が時々見つかりました。

私のアプリは、コードを変更せずに再起動することなく、正常に機能しましたng start。遅くまでコーディングの驚きの 1 つ。

通常、すべてのインポートをチェックしていたので、これは私を夢中にさせます。「共通モジュール」の答えは通常意味がありますが、誰かが私が直面した同じばかげた状況を見つけた場合に備えて、何をすべきかがわかります。

于 2020-05-04T23:43:57.193 に答える
5

私の場合、パイプへの入力は null でした。したがって、質問の場合は、blog.userin<p>{{ (blog.user | async)?.first_name }}</p>が null でないことを確認してください。

于 2020-07-13T12:56:57.697 に答える