从(组件1)删除对象时(组件2)上的Angular2 ViewWrappedError

问题描述

我正在开发一个angular2应用程序，该应用程序使用户可以从源列表(component1)到目标列表中单击选择项.(组件2)我在这里遵循航天任务"服务模式: https://angular.io/docs/ts/latest/cookbook/component-communication.html#！#bidirectional-service

I'm working on an angular2 application that lets users click-select items from a source list (component1) to a destination list. (component 2) I followed the "astronaut mission" service pattern here:https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

该服务似乎可以正常工作；当我单击左侧的项目时，它会显示在右侧.但是，当我在click方法中添加代码以从源数组中删除项目时，出现了关于目标列表的ViewWrappedError 告诉这是编码问题还是环境/版本问题，因此任何提示都很棒.

The service appears to work; when I click an item on the left, it appears on the right. However, when I add code in the click method to delete the item from the source array, I'm getting a ViewWrappedError regarding the destination list I'm new to angular so I don't know how to tell if this is a coding or environment/version issue so any tips would be great.

onSelect(asset: Asset): void {
   this.buildFundService.selectAsset(asset.id);
    this.universeassets.splice(this.universeassets.indexOf(asset),1);
  }

目标组件的html是:

The html for the destination component is:

<md-list>
    <md-list-item *ngFor="let asset of assets"
    (click)="onSelect(asset)">
       <span class="badge">{{asset.id}}</span> {{asset.name}}
    </md-list-item>
</md-list>

来自浏览器控制台的错误是:

Error from browser console is:

ViewWrappedError__zone_symbol__error: Error: Error in ./UserFundComponent class UserFundComponent - inline template:4:27 caused by: Cannot read property 'id' of undefined
    at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:3322:33)
    at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:26556:16)
    at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:26621:16)
    at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:58974:16)
    at View_UserFundComponent1.DebugAppView._rethrowWithContext (http://localhost:4200/vendor.bundle.js:83726:23)
    at View_UserFundComponent1.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83699:18)
    at ViewContainer.detectChangesInNestedViews (http://localhost:4200/vendor.bundle.js:83833:37)
    at CompiledTemplate.proxyViewClass.View_UserFundComponent0.detectChangesInternal (/AppModule/UserFundComponent/component.ngfactory.js:188:14)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:83501:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83696:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:83486:18)
    at CompiledTemplate.proxyViewClass.View_BuildFundComponent0.detectChangesInternal (/AppModule/BuildFundComponent/component.ngfactory.js:79:20)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:83501:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83696:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:83486:18)_nativeError: ZoneAwareErrorcontext: DebugContextmessage: (...)name: (...)originalError: TypeError: Cannot read property 'id' of undefined
    at View_UserFundComponent1.detectChangesInternal (/AppModule/UserFundComponent/component.ngfactory.js:71:71)
    at View_UserFundComponent1.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:83501:14)
    at View_UserFundComponent1.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83696:44)
    at ViewContainer.detectChangesInNestedViews (http://localhost:4200/vendor.bundle.js:83833:37)
    at CompiledTemplate.proxyViewClass.View_UserFundComponent0.detectChangesInternal (/AppModule/UserFundComponent/component.ngfactory.js:188:14)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:83501:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83696:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:83486:18)
    at CompiledTemplate.proxyViewClass.View_BuildFundComponent0.detectChangesInternal (/AppModule/BuildFundComponent/component.ngfactory.js:79:20)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:83501:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83696:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:83486:18)
    at CompiledTemplate.proxyViewClass.View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:49:19)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:83501:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83696:44)originalStack: (...)stack: (...)toSource: ()toString: ()zoneAwareStack: (...)get message: ()set message: (value)get name: ()set name: (value)get originalStack: ()set originalStack: (value)get stack: ()set stack: (value)get zoneAwareStack: ()set zoneAwareStack: (value)__proto__: WrappedError
consoleError @ polyfills.bundle.js:2882

这些是我正在使用的软件包.我从0.7.2开始尝试了zone.js的每个版本(基于一些降级有助于解决此错误的报告)，但是没有运气.

And these are the packages I'm using. I tried every version of zone.js from 0.7.2 up (based on some reports that downgrading helped this error) but with no luck.

package.json
{
  "name": "buildfund",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/material": "^2.0.0-beta.2",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.1.0",
    "zone.js": "^0.7.7"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0-rc.1",
    "@angular/compiler-cli": "^2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.4.2",
    "typescript": "~2.0.0"
  }
}

推荐答案

可以看到，当您单击该特定的资产时，该记录在子组件中被删除，这破坏了应用程序.这就是您收到上述错误的原因.

It is observed that, when you click on that particular asset, the record is removed in the child component, which breaks the application. That's the reason you get the above error.

单击删除后的预期行为，将有关资产的信息通知家长

Expected behavior when a delete is clicked, notify the parent about the asset

<md-list>
    <md-list-item *ngFor="let asset of assets"
    (deleteClicked)="onSelect(asset)">
       <span class="badge">{{asset.id}}</span> {{asset.name}}
    </md-list-item>
</md-list>

将要删除的资产发送到上级组件

Emit the asset to be deleted to the parent component

onSelect(asset){
   this.deleteClicked.emit(asset);
}

通过处理父组件中发出的事件来进行拼接.

Splice the by handling the emitted event in the parent component.

deleteClikced(asset){
     this.buildFundService.selectAsset(asset.id);
     this.universeassets.splice(this.universeassets.indexOf(asset),1);
}

这篇关于从(组件1)删除对象时(组件2)上的Angular2 ViewWrappedError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！