angular – 嵌入式模板上任何指令都未使用的属性绑定ngif

我想帮助我解决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" ="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"
  }
}

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"
]
}