Eigenschaft Bindung ngif nicht von einer Richtlinie auf eine eingebettete Vorlage
Ich bin erstellen einer einfachen Anwendung in Eckig (Angular2 RC4) und ich fand es schwierig, um die Anwendung auszuführen, die mit dem live-server in nodejs.
Möchte ich um Hilfe, was kann ich tun, um Fehler zu umgehen, erscheint in der Chrome-Konsole.
Fehler in der Konsole von Chrome:
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.Komponente.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>
Paket.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"
]
}
InformationsquelleAutor Eduardo Cordeiro | 2016-07-22
Du musst angemeldet sein, um einen Kommentar abzugeben.
Angular2-Direktiven case-Sensitiv. Die Richtlinie ist
*ngIf
, mit die Hauptstadt 'ich'.Winkel wirft einen Fehler für
*ngif
, weil Sie nicht wissen, was eine solche Richtlinie ist.Ich bin mit
*ngIf
und ich bekomme immer noch diesen Fehler. Diese scheint es aber beheben: stackoverflow.com/questions/42063686/...Das ist richtig. Heute ist Sie nicht nur schreiben müssen, das die Richtlinie den Namen mit der richtigen groß - / Kleinschreibung, aber Sie müssen auch importieren, die
CommonModule
(BrowserModule
nur re-Exporte). Die OP ' s problem, war aber wegen der Großschreibung nur, wie es war, keine Module-Konzept in RC4.InformationsquelleAutor Mateusz Kocz