尝试使用嵌套组件时，promise 中未捕获的异常 [英] Uncaught exception in promise when when trying to use nested components

查看：29
本文介绍了尝试使用嵌套组件时，promise 中未捕获的异常的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

尝试使用嵌套组件时出现此异常:

例外:错误:未捕获(承诺):类型错误:无法设置属性endSourceSpan"为空XCEPTION:错误:未捕获(承诺):类型错误:无法设置 nullBrowserDomAdapter.logError @ angular2.dev.js:23877BrowserDomAdapter.logGroup @ angular2.dev.js:23888ExceptionHandler.call @ angular2.dev.js:1317 的属性endSourceSpan"(匿名函数)@ angular2.dev.js:12763schedulerFn @ angular2.dev.js:13167SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690.js:10690:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.js:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13148NgZone._zoneImpl.ng_zone_impl_1.Ngzone.:13566NgZoneImpl.inner.inner.fork.onHandleError @ angular2.dev.js:2128ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244drainMicroTaskQueue @ @angular2.dev.js:2128ZoneDelegate.handleError-polyfills.js:434angular2.dev.js:23877 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:23877ExceptionHandler.call @ angular2.dev.js:1319(匿名函数) @ angular2.dev.js:12763schedulerFnjs @ angular2.dev.Subscribe.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191Subject._next @ Rx.Subject:1118next@ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13148NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13566NgZoneImpl.inner.inner.fork.onHandleError @ angular212.onHandleError @ angular212.@ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244drainMicroTaskQueue @ angular2-polyfills.js:495ZoneTask.invoke @ angular2-polyfills.js:434angular2.dev.js:23877 错误:未捕获(承诺):TypeError:无法设置 null 的属性endSourceSpan"在 resolvePromise (angular2-polyfills.js:543)在 angular2-polyfills.js:520在 ZoneDelegate.invoke (angular2-polyfills.js:332)在 Object.NgZoneImpl.inner.inner.fork.onInvoke (angular2.dev.js:2111)在 ZoneDelegate.invoke (angular2-polyfills.js:331)在 Zone.run (angular2-polyfills.js:227)在 angular2-polyfills.js:576在 ZoneDelegate.invokeTask (angular2-polyfills.js:365)在 Object.NgZoneImpl.inner.inner.fork.onInvokeTask (angular2.dev.js:2103)在 ZoneDelegate.invokeTask (angular2-polyfills.js:364)BrowserDomAdapter.logError @ angular2.dev.js:23877ExceptionHandler.call @ angular2.dev.js:1320(匿名函数) @ angular2.dev.js:12763scheduler2.dev @.js:13167SafeSubscriber.__tryOrUnsub @ Rx.js:10775SafeSubscriber.next @ Rx.js:10730Subscriber._next @ Rx.js:10690Subscriber.next @ Rx.js:10667Subject._finalNext @ Rx.js:11191 @RxSubject.js_next:11183Subject.next @ Rx.js:11142EventEmitter.emit @ angular2.dev.js:13148NgZone._zoneImpl.ng_zone_impl_1.NgZoneImpl.onError @ angular2.dev.js:13566NgZoneImpl.inner.inner.fork:2128ZoneDelegate.handleError @ angular2-polyfills.js:336Zone.runGuarded @ angular2-polyfills.js:244drainMicroTaskQueue @ angular2-polyfills.js:495ZoneTask.invoke @ angular2-polyfills.js:434angular2-polyfills.js:469 未处理的承诺拒绝:无法设置 null 的属性endSourceSpan"；区域:角度；任务:Promise.then；值:TypeError:无法设置 null(…)consoleError @ angular2-polyfills.js:469drainMicroTaskQueue @ angular2-polyfills.js:498ZoneTask.invoke @ angular2-polyfills.js:434 的属性endSourceSpan"angular2-polyfills.js:471 错误:未捕获(承诺):TypeError:无法设置 null(…)consoleError 的属性endSourceSpan"@angular2-polyfills.js:471drainMicroTaskQueue@angular2-polyfills.js:498ZoneTask.invoke@angular2-polyfills.js:434

这是我的主要组件代码:

import {BaseMenuComponent} from '../../../../components/menuComponent/baseMenuComponent/baseMenuComponent';让 applicationPath: string = '/app/pages/adminPage/categoriesPage/requestsPage';@成分({选择器:'公司页面'，templateUrl: applicationPath + '/requestsPage.html',styleUrls:[ applicationPath + '/requestsPage.css'],提供者:[RequestTypeService, HTTP_PROVIDERS],指令:[BaseMenuComponent]})导出类 RequestsPage 实现 OnInit {requestTypes:Array= 新数组()；搜索查询:字符串="；菜单列表 = [{id:12, layer:0, name:'asd'},{id:13, layer:0, name:'asda'},{id:14, layer:0, name:'asdd'}];层 = 0;_requestTypeService:RequestTypeService构造函数(请求类型服务:请求类型服务){this._requestTypeService = requestTypeService;}ngOnInit(){//this.getRequestTypesWithFilters();}}

这是子组件:

import {Component, Input, Output, EventEmitter, OnInit} from 'angular2/core';@成分({选择器:'基本菜单'，//templateUrl: '/app/components/menuComponent/baseMenuComponent/baseMenuComponent.html'模板:`<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"(点击)="addMenuItem()"><span class="glyphicon glyphicon-plus"></span><button class="btn btn-success" (click)="clearMenuItem()"><span class="glyphicon glyphicon-remove"></span><li *ngFor="#item of menuItems" [class]="isItemSelected(item) ? 'active':''" (click)="selectItem(item)"><a>{{item.name}}</a>

`})导出类 BaseMenuComponent 实现 OnInit {@Input('menu-items-list') menuItemsList:Array;@Input('menu-layer') menuLayer:number;@Output('select-menu-item') broadcastMenuItem: EventEmitter= new EventEmitter();@Output('add-new-item') broadcastNewItem: EventEmitter= new EventEmitter();selectedItem:MenuItem;新菜单项:字符串；构造函数(){}ngOnInit(){this.selectedItem = this.menuItemsList &&this.menuItemsList.length >0 ?this.menuItemsList[0] : null;this.newMenuItem = "";}isItemSelected(menuItem){返回 this.selectedItem == menuItem;}选择项(菜单项){this.selectedItem = menuItem;this.broadcastMenuItem.emit({menuItem:menuItem, menuLayer:this.menuLayer});}添加菜单项(){this.broadcastNewItem.emit({menuItem:this.newMenuItem, menuLayer:this.menuLayer});this.clearMenuItem();}清除菜单项(){this.newMenuItem = "";}}界面菜单项{ID;层;父 ID；姓名;}接口菜单数据{菜单项；菜单层；}

有人可以从哪里解释这个错误以及它出现的原因吗?
对我来说，html 和两个组件看起来都非常清晰.

解决方案

我确实遇到过类似的问题，但原因不同:

我使用 angular-cli 构建了一个小应用程序，当组件的 html 被创建时，它有类似的东西:

组件工作！</p>

所以我所做的是测试我的组件:

组件工作！<div *ngFor="#value in values">{{价值}}

</p>

但是错误出现了.

这只是因为一个段落不能包含块元素，如( div , h1, ul 等).

浪费了很多时间只是为了发现......

当我这样做

 
组件工作！<div *ngFor="#value in values">{{价值}}

一切正常;)

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();
    }
}

and this is the child component:

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;
}

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 :

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>

But then the error showed up.

It's just because a paragraph can't contain a block element like ( div , h1, ul etc).

So many time wasted just to spot that ...

When I do 

 <div>
    Component works !

    <div *ngFor="#value in values">
       {{value}}
    </div>
 </div>

It's working fine ;)

这篇关于尝试使用嵌套组件时，promise 中未捕获的异常的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆