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

Question

我正在 Angular (Angular2 RC4) 中创建一个简单的应用程序，我发现很难在 nodejs 中使用实时服务器运行该应用程序。

我想帮助解决出现在 Chrome 控制台中的错误。

控制台 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”。

Angular 为 *ngif 抛出错误，因为它不知道这样的指令是什么。

Answer 2

您应该在根模块 (AppModule) 中导入 CommonModule，或者在您想在其中使用 *ngIf 的模块中（例如 TestModule）。

import { CommonModule } from "@angular/common";
...
@NgModule({
    imports: [CommonModule]
    ...
})
export class AppModule { }