속성 바인딩 ngif가 임베디드 템플리트의 지시문에 사용되지 않았습니다.

Question

Angular (Angular2 RC4)로 간단한 응용 프로그램을 만들고 nodejs의 라이브 서버로 응용 프로그램을 실행하기가 어렵습니다.

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 지시어는 대소 문자를 구분합니다. 지시어는 *ngIf이고 대문자 'I'입니다.

각도가 *ngif 인 경우 해당 지시문이 무엇인지 모르기 때문에 오류가 발생합니다.