我在Angular(Angular2 RC4)中创建一个简单的应用程序,我发现很难用nodejs中的live服务器运行应用程序。
我想帮助我解决Chrome控制台中出现的错误。
控制台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" [video]="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" [video]="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"
}
}
systemjs.config.js
(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"
]
}
答案 0 :(得分:21)
Angular2指令区分大小写。指令为*ngIf
,带有大写&#39; I&#39;。
Angular会为*ngif
引发错误,因为它不知道这样的指令是什么。
答案 1 :(得分:4)
您应该在根模块(AppModule)或要在其中使用* ngIf的模块(例如TestModule)中导入CommonModule。
import { CommonModule } from "@angular/common";
...
@NgModule({
imports: [CommonModule]
...
})
export class AppModule { }