0
ここで何が起こっているのかわかりません。私は一日中この間にいました。 todolistの角度2アプリが認識されない<app></app> in index.html
import {Component} from 'angular2/core'
import {TodoService} from "./TodoService";
@Component({
selector: 'todo-list',
template:`<div>
<ul>
<li *ngFor="#todo of todoService.todos">
{{todo}}
</li>
</ul>
</div>`
})
export class TodoList{
constructor(public todoService: TodoService){
}
}
のtodo-入力
<!DOCTYPE html>
<html lang="en">
<head>
<title>Angular 2 in action</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Load libraries (Note: IE required polyfills, in this exact order_ -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/js/main').then(null, console.error.bind(console));
</script>
</head>
<body>
<div class="container-fluid">
<App>Loading...</App>
</div>
</body>
</html>
のindex.html：私はAngular2に新しいですが、ない1.ここに私は私のコンソールで取得していますエラーがあります.ts
import {Component} from 'angular2/core';
import {TodoService} from "./TodoService";
@Component({
selector: 'todo-input',
template: `<div>
<input type="text" placeholder="Enter some text" #myInput>
<button (click)="onClick(myInput.value)">Click me</button>
</div>`
})
export class TodoInput{
constructor(public todoService: TodoService){
}
onClick(value){
this.todoService.todos.push(value);
console.log(this.todoService.todos);
}
}
main.ts
import {bootstrap} from 'angular2/platform/browser';
import {Component} from "angular2/core";
import {TodoService} from "./TodoService";
import {TodoInput} from "./todo-inputs";
import {TodoList} from "./ToDoList"
@Component({
selector: '<App>',
directives: [TodoInput,TodoList],
template: `<div>
<todo-input></todo-input>
<todo-list></todo-list>
</div>`
})
class App{
}
bootstrap(App,[TodoService]);
TodoService.ts
import {Injectable} from "angular2/core";
@Injectable()
export class TodoService {
todos =[];
}
私は時間のために何度もそれを分析していると私は間違っている可能性がものを見ることができません。プロジェクトはGITでもにアップロードされます
私は今自分自身に向かっている怒りを表現することすらできません。ありがとうございました！ – Drew1208
これを試してください：それは動作します：https://en.wikipedia.org/wiki/Rubber_duck_debugging –