Angular2的新用户,试图在本地系统上运行this plunkr项目。我得到以下错误:
错误:(25,23)TS2339:类型“PeopleService”上不存在属性“People”。
错误:(26,39)ts2339:类型“people”上不存在属性“people”
在台词中:
人民服务
。订阅(people=>this.people=people);
我有理由相信,我有适当的环境设置,因为我有其他基本组件运行正常。
people.ts文件:
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'
import {PeopleService} from './peopleService'
import {Person} from './person'
@Component({
selector: 'my-app',
providers: [PeopleService]
})
@View({
template: `
<div>
<h2>Hello Angular2!</h2>
<my-person
*ng-for="#person of people"
[name]="person.name"
(hello)="saidHello($event)">
</my-person>
</div>
`,
directives: [CORE_DIRECTIVES, Person]
})
export class People {
constructor(public peopleService:PeopleService) {
peopleService.people
.subscribe(people => this.people = people);
}
saidHello($event){
alert(`You said hello to ${$event}`)
}
}
peopleservice.ts文件中的类似错误:
错误:(8,14)TS2339:类型“PeopleService”上不存在属性“People”。
//a simple service
import {Injectable} from 'angular2/angular2';
import {Http} from 'angular2/http';
@Injectable()
export class PeopleService {
constructor(http:Http) {
this.people = http.get('api/people.json').map(res => res.json());
}
}
任何指导都将不胜感激!
Yaniv, I'm still working thru this, below is the exception after implementing the change. Also, I didn't notice this before but I'm getting a warning in the people.ts file on the following statements:
[name]="person.name"
(hello)="saidHello($event)">
警告
此处不允许属性[名称]
此处不允许使用属性(hello)
EXCEPTION: Cannot resolve all parameters for People(?). Make sure they all have valid type or annotations.
angular2.dev.js:21835 EXCEPTION: Cannot resolve all parameters for People(?). Make sure they all have valid type or annotations.BrowserDomAdapter.logError @ angular2.dev.js:21835BrowserDomAdapter.logGroup @ angular2.dev.js:21846ExceptionHandler.call @ angular2.dev.js:4431(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4433(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 Error: Cannot resolve all parameters for People(?). Make sure they all have valid type or annotations.
at NoAnnotationError.BaseException [as constructor] (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:16034:21)
at new NoAnnotationError (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:4983:14)
at _dependenciesFor (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:20066:13)
at resolveFactory (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:19964:22)
at Object.resolveProvider (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:19983:66)
at Function.DirectiveProvider.createFromProvider (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:23906:27)
at Function.DirectiveProvider.createFromType (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:23915:32)
at provideDirective (http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:27209:49)
at http://127.0.0.1:8080/node_modules/angular2/bundles/angular2.dev.js:27188:14
at Array.map (native)BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4434(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21845 EXCEPTION: TypeError: Cannot read property 'location' of undefined
angular2.dev.js:21835 EXCEPTION: TypeError: Cannot read property 'location' of undefinedBrowserDomAdapter.logError @ angular2.dev.js:21835BrowserDomAdapter.logGroup @ angular2.dev.js:21846ExceptionHandler.call @ angular2.dev.js:4431(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4433(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 TypeError: Cannot read property 'location' of undefined
at angular2.dev.js:19434
at Zone.run (angular2.dev.js:138)
at Zone.run (angular2.dev.js:10644)
at zoneBoundFn (angular2.dev.js:111)
at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1507)
at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1519)
at lib$es6$promise$$internal$$publish (angular2.dev.js:1490)
at angular2.dev.js:219
at microtask (angular2.dev.js:10670)
at Zone.run (angular2.dev.js:138)BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4434(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21845 EXCEPTION: TypeError: Cannot read property 'hostView' of undefined
angular2.dev.js:21835 EXCEPTION: TypeError: Cannot read property 'hostView' of undefinedBrowserDomAdapter.logError @ angular2.dev.js:21835BrowserDomAdapter.logGroup @ angular2.dev.js:21846ExceptionHandler.call @ angular2.dev.js:4431(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4433(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 TypeError: Cannot read property 'hostView' of undefined
at tick (angular2.dev.js:19626)
at Zone.run (angular2.dev.js:138)
at Zone.run (angular2.dev.js:10644)
at zoneBoundFn (angular2.dev.js:111)
at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1507)
at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1519)
at lib$es6$promise$$internal$$publish (angular2.dev.js:1490)
at angular2.dev.js:219
at microtask (angular2.dev.js:10670)
at Zone.run (angular2.dev.js:138)BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4434(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$$internal$$tryCatch @ angular2.dev.js:1507lib$es6$promise$$internal$$invokeCallback @ angular2.dev.js:1519lib$es6$promise$$internal$$publish @ angular2.dev.js:1490(anonymous function) @ angular2.dev.js:219microtask @ angular2.dev.js:10670run @ angular2.dev.js:138(anonymous function) @ angular2.dev.js:10644zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
编辑:
PeopleService的简化版本
//a simple service import {Injectable} from 'angular2/angular2';
@Injectable() export class PeopleService {
people: any;
constructor() {
this.people = [
{"id": 1, "name": "Brad"},
{"id": 2, "name": "Jules"},
{"id": 3, "name": "Jeff"}
]
} }
最佳答案
错误是由typescript编译器引起的。您必须将people
定义为PeopleService
的成员:
//a simple service
import {Injectable} from 'angular2/angular2';
import {Http} from 'angular2/http';
@Injectable()
export class PeopleService {
people: any;//-> this part is missing in your code.
constructor(http:Http) {
this.people = http.get('api/people.json').map(res => res.json());
}
}
我不确定它是什么类型的数组,所以我把它做成了
any
。无论如何,它应该被定义为一个类成员。编辑:
在PeopleService中的错误中响应您的编辑。尝试更新组件以注入人员服务,如下所示:
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'
import {Inject} from 'angular2/core';
import {PeopleService} from './peopleService'
import {Person} from './person'
@Component({
selector: 'my-app',
providers: [PeopleService]
})
@View({
template: `
<div>
<h2>Hello Angular2!</h2>
<my-person
*ng-for="#person of people"
[name]="person.name"
(hello)="saidHello($event)">
</my-person>
</div>
`,
directives: [CORE_DIRECTIVES, Person]
})
export class People {
public peopleService: PeopleService;
constructor(@Inject(PeopleService) peopleService:PeopleService) {
this.peopleService = peopleService;
this.peopleService.people
.subscribe(people => this.people = people);
}
saidHello($event){
alert(`You said hello to ${$event}`)
}
}
注意构造函数内部的
@Inject(PeopleService)
和它的新导入:import {Inject} from 'angular2/core';
我推荐阅读这篇关于angular 2中依赖注入的文章,它对我帮助很大!