嵌入式模板上的任何指令均未使用属性绑定ngif [英] Property binding ngif not used by any directive on an embedded template

问题描述

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

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.

在解决Chrome控制台中出现的错误方面，我想提供帮助.

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:

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

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

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

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

tsconfig.json

{
"compilerOptions": {
    "target": "es6",
    "module": "system",
    "sourceMap": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "watch": true 
},
"exclude": [
    "node_modules"
]
}

推荐答案

Angular2指令区分大小写.指令为*ngIf，大写字母"I".

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

Angular会为*ngif引发错误，因为它不知道该指令是什么.

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

这篇关于嵌入式模板上的任何指令均未使用属性绑定ngif的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！