我在Angular(Angular2 RC4)中创建一个简单的应用程序,我发现很难用nodejs中的live服务器运行应用程序.
控制台Chrome中的Erro:
browser_adapter.ts:82 EXCEPTION: Template parse errors: Property binding ngif not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. (" </video-list> [ERROR ->]<video-detail *ngif="selectedVideo" ="selectedVideo"> </video-detail>"): AppComponent@8:0**
app.component.ts
import {Input,Output,Component} from '@angular/core' import {Config} from './config.service' import {Video} from './video' import {VideoListComponent} from './videolist.component' import {VideoDetailComponent} from './videodetail.component' @Component({ selector: 'my-app',templateUrl: 'app/app.component.html',directives: [VideoListComponent,VideoDetailComponent] }) export class AppComponent { title = Config.TITLE_PAGE; videos: Array<Video>; selectedVideo : Video; constructor() { this.videos = [ new Video(1,"Test","www.test.com","Test Description"),new Video(2,"Test 2","www.test2.com") ] } onSelectVideo(video) { //console.log(JSON.stringify(video)); this.selectedVideo = video; } }
app.component.html
<h1 class="jumbotron"> {{title}} </h1> <!-- conceito [binding] videos recebe os valores do AppComponent.ts--> <video-list [videos]="videos" (selectVideo)="onSelectVideo($event)"> </video-list> <video-detail *ngif="selectedVideo" ="selectedVideo"> </video-detail>
的package.json
{ "name": "angularbase","version": "1.0.0","description": "Projeto Base","main": "index.js","scripts": { "test": "echo \"Error: no test specified\" && exit 1" },"keywords": [ "projeto","base","angular","angular2" ],"author": "Eduardo Cordeiro","license": "ISC","dependencies": { "@angular/common": "^2.0.0-rc.4","@angular/compiler": "^2.0.0-rc.4","@angular/core": "^2.0.0-rc.4","@angular/forms": "^0.2.0","@angular/http": "^2.0.0-rc.4","@angular/platform-browser": "^2.0.0-rc.4","@angular/platform-browser-dynamic": "^2.0.0-rc.4","@angular/upgrade": "^2.0.0-rc.4","angular2-in-memory-web-api": "0.0.7","bootstrap": "^3.3.6","rxjs": "^5.0.0-beta.6","systemjs": "^0.19.27","zone.js": "^0.6.12" } }
(function (global) { // mapa de carregamento do systemjs var map = { 'app': 'app',// 'dist','rxjs': 'node_modules/rxjs','angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api','@angular': 'node_modules/@angular' }; // pacotes que o systemjs pode carregar // caso não encontre o arquivo no mapa var packages = { 'app': { main: 'boot.js',defaultExtension: 'js' },'rxjs': { defaultExtension: 'js' },'angular2-in-memory-web-api': { defaultExtension: 'js' },}; var packageNames = [ '@angular/common','@angular/compiler','@angular/core','@angular/http','@angular/platform-browser','@angular/platform-browser-dynamic','@angular/router','@angular/router-deprecated','@angular/testing','@angular/upgrade',]; // mapeia os pacotes do angular de acordo com o packageName acima packageNames.forEach(function (pkgName) { packages[pkgName] = { main: 'index.js',defaultExtension: 'js' }; }); var config = { map: map,packages: packages } if (global.filterSystemConfig) { global.filterSystemConfig(config); } System.config(config); })(this);
tsconfig.json
{ "compilerOptions": { "target": "es6","module": "system","sourceMap": true,"moduleResolution": "node","emitDecoratorMetadata": true,"experimentalDecorators": true,"removeComments": false,"noImplicitAny": false,"watch": true },"exclude": [ "node_modules" ] }
原文地址:https://www.jb51.cc/angularjs/141686.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。