角度 – 当尝试使用嵌套组件时承诺中未捕获异常
发布时间:2020-12-17 08:18:03 所属栏目:安全 来源:网络整理
导读:尝试使用嵌套组件时,我收到此异常: EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot set property 'endSourceSpan' of nullXCEPTION: Error: Uncaught (in promise): TypeError: Cannot set property 'endSourceSpan' of nullBrowserDomAdapt
尝试使用嵌套组件时,我收到此异常:
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 这是我的主要组件代码: <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,name:'asda'},{id:14,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; } 有人可以从这个错误的哪里解释我为什么出现?
我有一个类似的问题有不同的原因:
我使用angular-cli构建了一个小应用程序,当组件的html创建时,它有一些类似于 <p> Component works ! </p> 所以我做的是测试一下我的组件: <p> Component works ! <div *ngFor="#value in values"> {{value}} </div> </p> 但后来出现错误。 这只是因为一个段落不能包含像(div,h1,ul等)的块元素。 这么多时间浪费只是为了发现… 当我做 <div> Component works ! <div *ngFor="#value in values"> {{value}} </div> </div> 工作正常;) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- 如何不耍流氓的做运维之-SHELL脚本
- 通过Slick 2.1.0将超过22列的映射到Scala案例类
- twitter-bootstrap – Google Charts和Twitter Bootstrap标
- linux下编译boost.python简单方法
- Vim:如何进入insert-anywhere / canvas模式?
- bash/zsh脚本中“case”语句的奇怪语法的原因是什么?
- Bootstrap3.0学习第一轮(入门)
- bootstrap+angular关于js常见的一些问题
- 使用Bash下载并在wordpress wp-config.php中插入盐串
- 如何在Bluemix中将公共路由器分配给Docker组