Question

我正在开发一个angular2应用程序，它允许用户从源列表（component1）中单击选择项目到目标列表。（组件2）我在这里遵循“宇航员任务”服务模式： https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

该服务似乎有效;当我单击左侧的项目时，它出现在右侧。但是，当我在click方法中添加代码以从源数组中删除项目时，我得到一个关于目标列表的ViewWrappedError 我是角度新手，所以我不知道如何告诉我这是一个编码或环境/版本问题，所以任何提示都会很棒。

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

目标组件的html是：

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

浏览器控制台出错：

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

这些是我正在使用的包。我尝试将每个版本的zone.js从0.7.2上调（基于一些降级的报告帮助了这个错误），但没有运气。

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

Answer 1

据观察，当您点击特定的资产时，会删除子组件中的记录，这会破坏应用程序。这就是你得到上述错误的原因。

单击删除时的预期行为，通知父级有关资产的信息

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

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

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

通过处理父组件中的发射事件来拼接。

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

Answer 2

我从来没有在这方面做过根本原因，但它是基于Angular教程中的英雄服务的存根服务中的某个地方。一旦我设置了json-server并将该英雄服务更新为用户http.get（url），一切正常。

从（组件1）中删除对象时（组件2）上的Angular2 ViewWrappedError

2 个答案: