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

Property binding ngif not used by any directive on an embedded template

提问by Eduardo Cordeiro

I am creating a simple application in Angular (Angular2 RC4) and I'm finding it difficult to run the application with the live server in nodejs.

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

I would like to aid as to what I can do to work around the error that is appearing in the Chrome console.

我想帮助我做些什么来解决 Chrome 控制台中出现的错误。

Erro in console 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

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

应用程序组件.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

包.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

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

回答by Mateusz Kocz

Angular2 directives are case-sensitive.The directive is *ngIf, with capital 'I'.

Angular2 指令区分大小写。指令是*ngIf，大写“I”。

Angular throws an error for *ngif, because it doesn't know what such directive is.

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

回答by Bijender Kumar

You should import the CommonModule either in the root module (AppModule), or in the module that you want to use *ngIf in (e.g. TestModule).

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

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