"Error-ReferenceError-ErrorEvent未定义".适用于NativeScript应用 [英] "Error-ReferenceError-ErrorEvent is not defined" for NativeScript app
问题描述
我是NativeScript的新手.我正在按照Coursera上的视频教程来使用NativeScript创建Android项目,但遇到了以上这部分错误,这是我的代码的这一部分造成的:
process-httpmsg.service.ts
:
import { Injectable } from '@angular/core';
import { throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ProcessHTTPMsgService {
constructor() { }
public handleError(error: HttpErrorResponse | any) {
let errMsg: string;
if (error.error instanceof ErrorEvent) {
errMsg = error.error.message;
} else {
errMsg = `${error.status} - ${error.statusText || ''} ${error.message}`;
}
return throwError(errMsg);
}
}
dish.services.ts
:
import { Injectable } from '@angular/core';
import { Dish } from '../shared/dish';
import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { baseURL } from '../shared/baseurl';
import { ProcessHTTPMsgService } from './process-httpmsg.service';
@Injectable({
providedIn: 'root'
})
export class DishService {
constructor(private http: HttpClient,
private processHTTPMsgService: ProcessHTTPMsgService) { }
getDishes(): Observable<Dish[]> {
return this.http.get<Dish[]>(baseURL + 'dishes')
.pipe(catchError(this.processHTTPMsgService.handleError));
}
getDish(id: string): Observable<Dish> {
return this.http.get<Dish>(baseURL + 'dishes/' + id)
.pipe(catchError(this.processHTTPMsgService.handleError));
}
getFeaturedDish(): Observable<Dish> {
return this.http.get<Dish[]>(baseURL + 'dishes?featured=true').pipe(map(dishes => dishes[0]))
.pipe(catchError(this.processHTTPMsgService.handleError));
}
}
menu.component.html
:
<ActionBar title="Menu" class="action-bar">
</ActionBar>
<StackLayout class="page">
<ListView [items]="dishes" class="list-group" *ngIf="dishes">
<ng-template let-dish="item">
<StackLayout orientation="horizontal" class="list-group-item">
<Image row="0" col="0" rowSpan="2" height="108" width="108" [src]="BaseURL + dish.image" class="thumb p-16"></Image>
<GridLayout class="list-group-item" rows="auto *" columns="*">
<Label row="0" col="0" [text]="dish.name" class="list-group-item-heading"></Label>
<Label row="1" col="0" class="list-group-item-text" [text]="dish.description"></Label>
</GridLayout>
</StackLayout>
</ng-template>
</ListView>
<ActivityIndicator busy="true" *ngIf="!(dishes || errMess)" width="50" height="50" class="activity-indicator"></ActivityIndicator>
<Label *ngIf="errMess" [text]="'Error: ' + errMess"></Label>
</StackLayout>
menu.component.ts
:
import { Component, OnInit, Inject } from '@angular/core';
import { Dish } from '../shared/dish';
import { DishService } from '../services/dish.service';
@Component({
selector: 'app-menu',
moduleId: module.id,
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
dishes: Dish[];
errMess: string;
constructor(private dishService: DishService,
@Inject('baseURL') private baseURL) { }
ngOnInit() {
this.dishService.getDishes()
.subscribe(dishes => this.dishes = dishes,
errmess => this.errMess = <any>errmess);
}
}
我不知道需要在项目代码的其他部分添加内容,所以请告诉我.
baseURL.ts
:
// export const baseURL = "http://localhost:3000/";
export const baseURL = "http://192.168.1.5:3000/";
正如我已经提到的,您不能执行error.error instanceof ErrorEvent
,因为ErrorEvent
是不是类的接口.您可以error.error instanceof HttpErrorResponse
.
您无法从Simulator/Emulator中点击http://localhost:3000
,假设您是通过计算机的IP来访问api,因为它们位于同一网络中,但在技术上是不同的(模拟)设备.
I am a new learner of NativeScript. I am following a video tutorial on Coursera to create an Android project using NativeScript, and I got the above error that is made by this part of my code:
process-httpmsg.service.ts
:
import { Injectable } from '@angular/core';
import { throwError } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class ProcessHTTPMsgService {
constructor() { }
public handleError(error: HttpErrorResponse | any) {
let errMsg: string;
if (error.error instanceof ErrorEvent) {
errMsg = error.error.message;
} else {
errMsg = `${error.status} - ${error.statusText || ''} ${error.message}`;
}
return throwError(errMsg);
}
}
dish.services.ts
:
import { Injectable } from '@angular/core';
import { Dish } from '../shared/dish';
import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { baseURL } from '../shared/baseurl';
import { ProcessHTTPMsgService } from './process-httpmsg.service';
@Injectable({
providedIn: 'root'
})
export class DishService {
constructor(private http: HttpClient,
private processHTTPMsgService: ProcessHTTPMsgService) { }
getDishes(): Observable<Dish[]> {
return this.http.get<Dish[]>(baseURL + 'dishes')
.pipe(catchError(this.processHTTPMsgService.handleError));
}
getDish(id: string): Observable<Dish> {
return this.http.get<Dish>(baseURL + 'dishes/' + id)
.pipe(catchError(this.processHTTPMsgService.handleError));
}
getFeaturedDish(): Observable<Dish> {
return this.http.get<Dish[]>(baseURL + 'dishes?featured=true').pipe(map(dishes => dishes[0]))
.pipe(catchError(this.processHTTPMsgService.handleError));
}
}
menu.component.html
:
<ActionBar title="Menu" class="action-bar">
</ActionBar>
<StackLayout class="page">
<ListView [items]="dishes" class="list-group" *ngIf="dishes">
<ng-template let-dish="item">
<StackLayout orientation="horizontal" class="list-group-item">
<Image row="0" col="0" rowSpan="2" height="108" width="108" [src]="BaseURL + dish.image" class="thumb p-16"></Image>
<GridLayout class="list-group-item" rows="auto *" columns="*">
<Label row="0" col="0" [text]="dish.name" class="list-group-item-heading"></Label>
<Label row="1" col="0" class="list-group-item-text" [text]="dish.description"></Label>
</GridLayout>
</StackLayout>
</ng-template>
</ListView>
<ActivityIndicator busy="true" *ngIf="!(dishes || errMess)" width="50" height="50" class="activity-indicator"></ActivityIndicator>
<Label *ngIf="errMess" [text]="'Error: ' + errMess"></Label>
</StackLayout>
menu.component.ts
:
import { Component, OnInit, Inject } from '@angular/core';
import { Dish } from '../shared/dish';
import { DishService } from '../services/dish.service';
@Component({
selector: 'app-menu',
moduleId: module.id,
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
dishes: Dish[];
errMess: string;
constructor(private dishService: DishService,
@Inject('baseURL') private baseURL) { }
ngOnInit() {
this.dishService.getDishes()
.subscribe(dishes => this.dishes = dishes,
errmess => this.errMess = <any>errmess);
}
}
I don't know which other parts of the project's code is needed to put, so let me know that please.
EDIT:
baseURL.ts
:
// export const baseURL = "http://localhost:3000/";
export const baseURL = "http://192.168.1.5:3000/";
As I already mentioned you can not do error.error instanceof ErrorEvent
as ErrorEvent
is an interface not class. You could do error.error instanceof HttpErrorResponse
.
You can not hit http://localhost:3000
from your Simulator / Emulator, you are suppose to hit your api by your machine's IP as they are in same network but technically different (simulated) devices.
这篇关于"Error-ReferenceError-ErrorEvent未定义".适用于NativeScript应用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!