尝试使用嵌套组件时，promise中未捕获异常 [英] Uncaught exception in promise when when trying to use nested components
本文介绍了尝试使用嵌套组件时，promise中未捕获异常的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在尝试使用嵌套组件时出现此异常:
I am getting this exception when trying to use nested components:
EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot set property 'endSourceSpan' of null
XCEPTION: Error: Uncaught (in promise): TypeError: Cannot set property 'endSourceSpan' of nullBrowserDomAdapter.logError @ angular2.dev.js:23877BrowserDomAdapter.logGroup @ angular2.dev.js:23888ExceptionHandler.call @ angular2.dev.js:1317(anonymous function) @ angular2.dev.js:12763schedulerFn @ angular2.dev.js:13167SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13148NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13566NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2128ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244drainMicroTaskQueue @ angular2-polyfills.js:495ZoneTask.invoke @ angular2-polyfills.js:434
angular2.dev.js:23877 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23877ExceptionHandler.call @ angular2.dev.js:1319(anonymous function) @ angular2.dev.js:12763schedulerFn @ angular2.dev.js:13167SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13148NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13566NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2128ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244drainMicroTaskQueue @ angular2-polyfills.js:495ZoneTask.invoke @ angular2-polyfills.js:434
angular2.dev.js:23877 Error: Uncaught (in promise): TypeError: Cannot set property 'endSourceSpan' of null
at resolvePromise (angular2-polyfills.js:543)
at angular2-polyfills.js:520
at ZoneDelegate.invoke (angular2-polyfills.js:332)
at Object.NgZoneImpl.inner.inner.fork.onInvoke (angular2.dev.js:2111)
at ZoneDelegate.invoke (angular2-polyfills.js:331)
at Zone.run (angular2-polyfills.js:227)
at angular2-polyfills.js:576
at ZoneDelegate.invokeTask (angular2-polyfills.js:365)
at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (angular2.dev.js:2103)
at ZoneDelegate.invokeTask (angular2-polyfills.js:364)BrowserDomAdapter.logError @ angular2.dev.js:23877ExceptionHandler.call @ angular2.dev.js:1320(anonymous function) @ angular2.dev.js:12763schedulerFn @ angular2.dev.js:13167SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13148NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13566NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2128ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244drainMicroTaskQueue @ angular2-polyfills.js:495ZoneTask.invoke @ angular2-polyfills.js:434
angular2-polyfills.js:469 Unhandled Promise rejection: Cannot set property 'endSourceSpan' of null ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot set property 'endSourceSpan' of null(…)consoleError @ angular2-polyfills.js:469drainMicroTaskQueue @ angular2-polyfills.js:498ZoneTask.invoke @ angular2-polyfills.js:434
angular2-polyfills.js:471 Error: Uncaught (in promise): TypeError: Cannot set property 'endSourceSpan' of null(…)consoleError @ angular2-polyfills.js:471drainMicroTaskQueue @ angular2-polyfills.js:498ZoneTask.invoke @ angular2-polyfills.js:434
这是我的主要组件代码:
This is my code for the main component:
<base-menu [menu-items-list]="menuList" [menu-layer]="layer"
(select-menu-item)="selectMenuItem($event)"
(add-new-item)="addMenuItem($event)"></base-menu>
import {BaseMenuComponent} from '../../../../components/menuComponent/baseMenuComponent/baseMenuComponent';
let applicationPath: string = '/app/pages/adminPage/categoriesPage/requestsPage';
@Component({
selector: 'companies-Page',
templateUrl: applicationPath + '/requestsPage.html',
styleUrls:[ applicationPath + '/requestsPage.css'],
providers:[RequestTypeService, HTTP_PROVIDERS],
directives:[BaseMenuComponent]
})
export class RequestsPage implements OnInit {
requestTypes:Array<RequestType> = new Array();
searchQuery: string = "";
menuList = [
{id:12, layer:0, name:'asd'},
{id:13, layer:0, name:'asda'},
{id:14, layer:0, name:'asdd'}];
layer = 0;
_requestTypeService:RequestTypeService
constructor(requestTypeService:RequestTypeService) {
this._requestTypeService = requestTypeService;
}
ngOnInit(){
//this.getRequestTypesWithFilters();
}
}
这是子组件:
import {Component, Input, Output, EventEmitter, OnInit} from 'angular2/core';
@Component({
selector: 'base-menu',
//templateUrl: '/app/components/menuComponent/baseMenuComponent/baseMenuComponent.html'
template:`
<div class="base-menu-component">
<ul class="nav nav-pills nav-stacked">
<li class="form-group row">
<input class="form-control" [(ngModel)]="newMenuItem"/>
<button class="btn btn-success" (click)="addMenuItem()">
<span class="glyphicon glyphicon-plus"></span>
</button>
<button class="btn btn-success" (click)="clearMenuItem()">
<span class="glyphicon glyphicon-remove"></span>
</button>
</li>
<li *ngFor="#item of menuItems" [class]="isItemSelected(item) ? 'active':''" (click)="selectItem(item)">
<a>{{item.name}}</a>
</li>
</ul>
</div>`
})
export class BaseMenuComponent implements OnInit {
@Input('menu-items-list') menuItemsList:Array<MenuItem>;
@Input('menu-layer') menuLayer:number;
@Output('select-menu-item') broadcastMenuItem: EventEmitter<MenuData> = new EventEmitter<MenuData>();
@Output('add-new-item') broadcastNewItem: EventEmitter<MenuData> = new EventEmitter<MenuData>();
selectedItem:MenuItem;
newMenuItem:string;
constructor() { }
ngOnInit(){
this.selectedItem = this.menuItemsList && this.menuItemsList.length > 0 ? this.menuItemsList[0] : null;
this.newMenuItem = "";
}
isItemSelected(menuItem){
return this.selectedItem == menuItem;
}
selectItem(menuItem){
this.selectedItem = menuItem;
this.broadcastMenuItem.emit({menuItem:menuItem, menuLayer:this.menuLayer});
}
addMenuItem(){
this.broadcastNewItem.emit({menuItem:this.newMenuItem, menuLayer:this.menuLayer});
this.clearMenuItem();
}
clearMenuItem(){
this.newMenuItem = "";
}
}
interface MenuItem{
id;
layer;
parentId;
name;
}
interface MenuData{
menuItem;
menuLayer;
}
有人可以从这个错误的位置以及为什么出现的原因来解释我吗?
对我来说，html和这两个组件看起来都很清晰.
Can someone explain me from where is this error and why it appears?
To me, the html and both components look very clear.
推荐答案
我确实有类似的问题，但原因不同:
I did have a similar issue with a different cause :
我使用angular-cli构建了一个小型应用，当创建组件的html时，它具有类似以下内容:
I built a small app using angular-cli and when the html of the component is created, it has something like :
<p>
Component works !
</p>
所以我要做的是测试一下我的组件:
So what I did is that to test a little bit my component :
<p>
Component works !
<div *ngFor="#value in values">
{{value}}
</div>
</p>
但是随后出现了错误.
这仅仅是因为一个段落不能包含诸如(div，h1，ul等)之类的块元素.
浪费很多时间只是为了发现那个...
So many time wasted just to spot that ...
我这样做
<div>
Component works !
<div *ngFor="#value in values">
{{value}}
</div>
</div>
一切正常；)
这篇关于尝试使用嵌套组件时，promise中未捕获异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
