[英]TypeError: undefined is not an object (evaluating 'this')
[英]EXCEPTION: TypeError: undefined is not an object (evaluating 'pipe.constructor') in Ionic 2?
我的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模拟器调试)
编辑:
Index.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>
您应该加载polyfill(Chrome可以在没有它们的情况下运行Angular):
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
Sasxa的回答帮助我解决了这个问题。 尽管我尝试指定路径,但似乎找不到其资源。 以下资源帮助我获得了答案。 正如Sasxa所指出的,Safari需要Intl polyfill。
我尝试使用NPM来安装它,而Bower却没有用,最后我决定使用CDN位置,因为它对我有用。
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.