[解決済み] パイプ ' ' が見つかりません。
2022-07-15 15:46:18
質問
このエラーを修正することができないようです。私は検索バーとngForを持っています。私はこのようなカスタムパイプを使用して配列をフィルタリングしようとしています。
import { Pipe, PipeTransform } from '@angular/core';
import { User } from '../user/user';
@Pipe({
name: 'usersPipe',
pure: false
})
export class UsersPipe implements PipeTransform {
transform(users: User [], searchTerm: string) {
return users.filter(user => user.name.indexOf(searchTerm) !== -1);
}
}
使用方法
<input [(ngModel)]="searchTerm" type="text" placeholder="Search users">
<div *ngFor="let user of (users | usersPipe:searchTerm)">
...
</div>
エラーです。
zone.js:478 Unhandled Promise rejection: Template parse errors:
The pipe 'usersPipe' could not be found ("
<div class="row">
<div
[ERROR ->]*ngFor="let user of (user | usersPipe:searchTerm)">
Angularのバージョンです。
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"bootstrap": "^3.3.6",
"zone.js": "^0.6.12"
どのように解決するのですか?
以下のような状況でないことを確認してください。 クロスモジュール問題に直面していないか確認してください。
パイプを使用しているコンポーネントが、パイプコンポーネントを "グローバルに" 宣言したモジュールに属していない場合、パイプは見つからず、このエラーメッセージが表示されます。
私の場合、別のモジュールでパイプを宣言し、パイプを使用するコンポーネントを持つ他のモジュールでこのパイプモジュールをインポートしました。
を宣言しています。 というのは、パイプを使っているコンポーネントが
パイプモジュール
import { NgModule } from '@angular/core';
import { myDateFormat } from '../directives/myDateFormat';
@NgModule({
imports: [],
declarations: [myDateFormat],
exports: [myDateFormat],
})
export class PipeModule {
static forRoot() {
return {
ngModule: PipeModule,
providers: [],
};
}
}
他のモジュールでの利用 (例: app.module)
// Import APPLICATION MODULES
...
import { PipeModule } from './tools/PipeModule';
@NgModule({
imports: [
...
, PipeModule.forRoot()
....
],
関連
-
[解決済み] モジュール "@angular-devkit/build-angular" が見つかりませんでした。
-
[解決済み] ng buildの後にangular-cliのdist-folderのパスを変更するには?
-
[解決済み] コンポーネントクラスからテンプレート参照変数にアクセスする
-
[解決済み] Angular 4/5/6 グローバル変数
-
[解決済み] Angular / Angular Materialでmat-horizontal-stepperのステップをプログラムで移動させることは可能ですか?
-
[解決済み] Angular v5からAngular v6にプロジェクトをアップグレードしたい。
-
[解決済み] 文字列|ヌル'型の引数は、文字列'型のパラメータに代入できません。タイプ 'null' はタイプ 'string' に割り当てられません。
-
[解決済み] Angular2 bodyタグにクラスを追加する
-
[解決済み] RxJSのmap演算子でエラーを出す方法 (angular)
-
[解決済み] Karma/Jasmineのテストで「[object ErrorEvent] thrown」エラーが発生した場合、どのようにデバッグすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Angular 2におけるEventEmitter.next()とEventEmitter.emit()の相違点
-
[解決済み] コンポーネントクラスからテンプレート参照変数にアクセスする
-
[解決済み] Angular 4/5/6 グローバル変数
-
[解決済み] Angular / Angular Materialでmat-horizontal-stepperのステップをプログラムで移動させることは可能ですか?
-
[解決済み] Angular v5からAngular v6にプロジェクトをアップグレードしたい。
-
[解決済み] 文字列|ヌル'型の引数は、文字列'型のパラメータに代入できません。タイプ 'null' はタイプ 'string' に割り当てられません。
-
[解決済み] Angular2 bodyタグにクラスを追加する
-
[解決済み] AngularでFormArrayからすべての項目を削除する
-
[解決済み] RxJSのmap演算子でエラーを出す方法 (angular)
-
[解決済み] Karma/Jasmineのテストで「[object ErrorEvent] thrown」エラーが発生した場合、どのようにデバッグすればよいですか?