【问题标题】:Ionic2/Angular2 - Uncaught TypeError: (0 , _ionicAngular.Pipe) is not a functionIonic/Angular 2 - 未捕获的 TypeError: (0 , _ ionic Angular.Pipe) 不是函数
【发布时间】:2016-04-28 12:09:29
【问题描述】:

我正在开发 Ionic2 应用程序。现在,我正在尝试实现一个自定义管道;但是,这样做时我收到以下错误:

未捕获的 TypeError: (0 , _ionicAngular.Pipe) 不是函数

到目前为止,这是我的代码:

import {Page, Pipe, NavController, NavParams} from 'ionic-angular';


    //Phone formatting pipe
    @Pipe({
        name: 'phone'
    })
    export class PhonePipe{
        transform(val, args) {
            val = val.charAt(0) != 0 ? '0' + val : '' + val;
            let newStr = '';

            for(i=0; i < (Math.floor(val.length/2) - 1); i++){
               newStr = newStr+ val.substr(i*2, 2) + '-';
               console.log(val);
            }
            return newStr+ val.substr(i*2);
        }
    }
    /////


    @Page({
      templateUrl: 'build/pages/outlet/outlet.html',
        pipes: [PhonePipe]
    })

    export class place {
      static get parameters() {
        return [[NavController],[NavParams]];
      }
      constructor(nav, navParams) {

      }
    }

outlet.html

<ion-content id="contentPadding" padding class="outlet">
    <div class="box">
        <div class="bigTitle">{{outletPhoneValue | phone}}</div>
    </div>
</ion-content>

当尝试通过以下方式实现 Pipe 时:

import {Pipe} from 'angular2/core';

第一个错误消失;但是,出现第二个错误:

例外:类型错误:val.charAt 不是 [{{outletPhoneValue |电话}}就位@28:25]

知道导致错误的原因吗?

【问题讨论】:

  • 管道怎么用?
  • 我已经编辑了帖子,请检查我如何使用它

标签: angular ionic2 pipes-filters


【解决方案1】:

Pipe 类必须从 angular2/core 而不是 ionic-angular 导入:

import {Pipe} from 'angular2/core';

【讨论】:

  • 我之前已经这样做了,但它给了我以下错误: 异常:TypeError:val.charAt 不是 [{{outletPhoneValue |电话}}就位@28:25]
  • 我猜outPhoneValue 是异步接收的,所以您需要检查val 是否为空/未定义。如果是这种情况,直接返回val。否则请进行处理...
  • 确实是异步接收的,但是变量甚至在条件之前就被加载了。为了确保我已经设置了一个显式变量: var val = 25565775;并得到同样的错误。我也添加了一个 if 条件来检查 null/undefined,但最终还是遇到了同样的错误!
  • 好的 ;-) outletPhoneValue 的类型是什么?一个字符串还是别的什么?
  • 一个数字,相信需要转换成.toString()才能工作!
猜你喜欢
  • 1970-01-01
  • 2022-12-05
  • 2021-01-20
  • 2019-09-15
  • 2018-11-12
  • 2022-01-18
  • 2018-07-14
  • 1970-01-01
  • 2022-07-09
相关资源
最近更新 更多