Property Bindung ngif nicht durch eine Richtlinie über eine eingebettete Vorlage verwendet

Question

Ich bin eine einfache Anwendung in Angular (Angular2 RC4) zu schaffen und ich finde es schwierig, die Anwendung mit dem Live-Server in NodeJS auszuführen.

ich zu unterstützen möchte, was ich tun kann, um den Fehler zu arbeiten, die in der Chrome-Konsole erscheinen.

Erro in Konsole 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.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" 
] 
} 

Answer 1

Angular2 Richtlinien Groß- und Kleinschreibung. Die Direktive ist *ngIf, mit Kapital 'I'.

Angular wirft einen Fehler für *ngif, weil sie nicht weiß, was solche Richtlinie ist.