【问题标题】:EXCEPTION: TypeError: undefined is not an object (evaluating 'pipe.constructor') in Ionic 2?例外:TypeError:未定义不是 Ionic 2 中的对象(评估“pipe.constructor”)?
【发布时间】:2016-06-15 00:54:31
【问题描述】:

我的 Ionic 2 应用程序在 chrome 浏览器上运行良好,它提供了预期的输出。但是当它在模拟器或浏览器上运行时会出现以下错误。

这是我正在使用的代码:

<label class="time">{{appointment.DateSent | date:"HH"}}:{{ appointment.DateSent| date:"mm"}}</label>
<label class="month">{{appointment.DateSent| date:"MMM"}}</label>
<label class="day">{{appointment.DateSent| date:"dd"}}</label>
<label class="year">{{appointment.DateSent| date:"yyyy"}}</label>

类实现:

    import {Page, NavController, NavParams} from 'ionic/ionic';
    import { Component, Pipe, PipeTransform, Inject, OnInit} from 'angular2/core';
    import 'rxjs/add/operator/map';
    import { Http, Headers, URLSearchParams } from 'angular2/http';
    import {SERVER_URL, appName, alertAppName} from '../services/config';
    import {AppointmentsDetailPage} from '../appointments-detail/appointments-detail';
    import {MessagesService} from '../services/messages-service';

    var today = new Date();

    @Page({
      templateUrl: 'build/pages/appointments/appointments.html',
      providers: [MessagesService]
    })
    export class AppointmentsPage implements PipeTransform {
      constructor(http: Http, nav: NavController, messagesService:MessagesService, navParams:NavParams) {
            this.http = http;
            this.messagesService = messagesService;
            this.nav = nav;

            this.selectedItem = navParams.get('item');
      }

ngOnInit() {
        this.messagesService.getAppointmentList()
        .subscribe(data => {

          var appointments = new Array();
              for(var i in data){
                var key = data[i];

                appointments.push({
                  MessageID: key.MessageID,
                  CategoryID: key.CategoryID,
                  DateSent: new Date(key.DateSent),
                  Title: key.Title,
                  MessageContent: key.MessageContent,
                  Sender: key.Sender,
                  Recipient: key.Recipient,
                  DateReceived: key.DateReceived,
                  DateRead: key.DateRead,
                  Note_Direction: key.Note_Direction,
                  Viewed: key.Viewed,
                  AppointmentDateTime: key.AppointmentDateTime,
                  MessageAttachments: key.MessageAttachments
                });
              }


      this.appointments = appointments;

所有日期管道在 Chrome 浏览器中工作正常,没有错误,但在模拟器或设备上出现以下异常(取自 Safari 模拟器调试)

已编辑:

索引.html

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
  <title>Ionic</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <!--<meta http-equiv="Content-Security-Policy" content="img-src 'self' data:; default-src 'self' http://XX.XX.XX.XX:8084/mypp/">-->
  <!--<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">-->
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="stylesheet" href="build/css/font-awesome.min.css">
  <link ios-href="build/css/app.ios.css" rel="stylesheet">
  <link md-href="build/css/app.md.css" rel="stylesheet">



</head>

<body>
  <ion-app></ion-app>

  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
  <script src="lib/ngCordova/dist/ng-cordova.js"></script>
  <script src="cordova.js"></script>
  <script src="build/js/app.bundle.js"></script>
</body>

</html>

【问题讨论】:

    标签: javascript pipe angular remote-debugging ionic2


    【解决方案1】:

    你应该加载 polyfills(Chrome 可以在没有它们的情况下运行 Angular):

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    

    【讨论】:

    • 嗨 Sasxa,感谢您的帮助!但它仍然给出了错误。我用我的 index.html 文件更新了问题,如果您发现其中有任何错误,请告诉我。
    • 无法从代码中真正看出。你可以不捆绑构建吗?这样就无法判断错误可能在哪里......
    • 是的,我可以在不包含捆绑包的情况下构建,实际设备也无法正常工作
    • 我正在使用 Ionic 2,如何在 src 中检查我的路径是否正确?
    • 它也给出了这样的错误,ORIGINAL EXCEPTION: ReferenceError: Can't find variable: Intl
    【解决方案2】:

    Sasxa 的回答帮助我解决了这个问题。虽然我试图指定路径,但它似乎没有找到它的资源。以下资源帮助我得到了答案。正如 Sasxa 指出的那样,Safari 需要 Intl polyfill。

    1. https://www.npmjs.com/package/intl
    2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Browser_Compatibility

    我尝试使用 NPM 和 Bower 安装它,但它不起作用,最后我决定使用 CDN 位置,因为它对我有用。

    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
    

    【讨论】:

      猜你喜欢
      • 2021-12-17
      • 2021-12-01
      • 2019-11-16
      • 2020-02-09
      • 2019-12-07
      • 2022-01-01
      • 2019-01-20
      • 2014-06-13
      • 2021-07-24
      相关资源
      最近更新 更多