使用离子4无法找到角管

问题描述 投票:4回答:2

最近我在ionic4名称中创建了自己的管道是StatusairportPipe。然后我在app module.ts中导入它,现在当我尝试使用它时出现错误:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'my' could not be found ("
            <td text-center>{{item?.flight.aircraft.model.code}}</td>
            <td text-right>{{[ERROR ->]item?.flight.status.generic.status.text | my}}</td>

            </tr>

StatusairportPipe模型ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'my'
})
export class StatusairportPipe implements PipeTransform {

  public states: Object = {
    'scheduled':   'مجدولة',

  };
  transform(value: string, ...args) {
    // This is our catch for data that hasn't interpolated
    // from its source yet, a basic async fix.
    if(value == null) return;
// Otherwise, lookup the state name from the acronym
    if(this.states[value]){
      return this.states[value];
    } else {
      return value;
    }
  }

}

app.module.ts

   import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { RouteReuseStrategy } from '@angular/router';

    import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
    import { SplashScreen } from '@ionic-native/splash-screen/ngx';
    import { StatusBar } from '@ionic-native/status-bar/ngx';

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { HTTP } from '@ionic-native/http/ngx';
    import { Network } from '@ionic-native/network/ngx';
    import { StatusairportPipe } from './statusairport.pipe';

    @NgModule({
      declarations:
       [AppComponent, 
        StatusairportPipe

      ],
      entryComponents: [],

      imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
        exports:[
    StatusairportPipe,
    AliPipe
  ],
      providers: [
        StatusBar,
        SplashScreen,
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
        HTTP,
        Network
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {}
angular angular-pipe
2个回答
2
投票

我已经遇到了这个问题,我刚刚在模块导出上添加了管道来解决问题。

试试这个:


@NgModule({
  declarations:
   [AppComponent, 
    StatusairportPipe

  ],
  entryComponents: [],

  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],

  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    HTTP,
    Network
  ],
  bootstrap: [AppComponent],
  exports: [ StatusairportPipe]
})
  export class AppModule {}

如果有效,请告诉我。祝好运。


1
投票

我修好了当我在ionic 4中创建自己的管道时,您只需要将它已经创建的管道添加到您想要使用的页面模块中。你不需要在app.module中添加


1
投票

我希望它会帮助别人。

1)首先,在src / app文件夹中创建管道文件夹(在app文件夹中)。

2)其次,在cmd“离子生成管道/ searchfilter”=>这将在管道中生成两个文件。

3第三,在名为“pipes.module.ts”的pipes文件夹中创建文件,并将下面的代码写入=>“pipes.module.ts”

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SearchfilterPipe } from './searchfilter.pipe';  //our pipe which we generate

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [SearchfilterPipe],
  exports: [SearchfilterPipe]
})
export class PipesModule { }

现在我们有了PipesModule,我们可以生成更多管道并将它们写入pipesmodule。我们只导入PipesModule而不是所有管道。

4)您不必在app.module.ts中导入PipesModule

5)现在转到要使用管道的页面并打开例如“anasayfa.module.ts”并导入“PipesModule”并将其写入@ngModel导入(它将自动创建)请注意将PipesModule导入到something.MODULE.TS不是something.page.ts

© www.soinside.com 2019 - 2024. All rights reserved.