* ngIf는 일부 부분에서는 정상적으로 작동하지만 다른 부분에서는 정상적으로 작동합니다. Angular 2.0.x

Question

단순한 구성 요소에서 * ngIf를 사용하려고 시도했으며 * ngIf에서 각도가 오류를 던지고 있습니다. 은 "* ngIf ="loggedIn "과 실행을 제거

는. {{loggedIn는}}과 거짓 이전에 로그인 한 후 사실을 보여줍니다.

주요 응용 프로그램이 잘 작동 메뉴를 활성화하기 위해 동일한 DIV를 사용합니다.

나는 몇 가지 간단한 잘못된 일을해야하지만, 그것은 나를 탈출

감사

첫 번째 오류

:.

Can't bind to 'ngIf' since it isn't a known property of 'div'. ("<div [ERROR ->]*ngIf="loggedIn"> 
    <div class='panel panel-primary'> 
     <div class='panel-heading' > 
"): ShowConfigComponent@0:5 
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. ("[ERROR ->]<div *ngIf="loggedIn"> 
    <div class='panel panel-primary'> 
     <div class='panel-heading' > 
"): ShowConfigComponent@0:0 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: 
Can't bind to 'ngIf' since it isn't a known property of 'div'. ("<div [ERROR ->]*ngIf="loggedIn"> 
    <div class='panel panel-primary'> 
     <div class='panel-heading' > 
"): ShowConfigComponent@0:5 
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. ("[ERROR ->]<div *ngIf="loggedIn"> 
    <div class='panel panel-primary'> 
     <div class='panel-heading' > 
"): ShowConfigComponent@0:0 
    at TemplateParser.parse (http://127.0.0.1:8080/node_modules/@angular/compiler/bundles/compiler.umd.js:8446:21) 
    at RuntimeCompiler._compileTemplate (http://127.0.0.1:8080/node_modules/@angular/compiler/bundles/compiler.umd.js:16824:53) 
    at eval (http://127.0.0.1:8080/node_modules/@angular/compiler/bundles/compiler.umd.js:16746:85) 
    at Set.forEach (native) 
    at compile (http://127.0.0.1:8080/node_modules/@angular/compiler/bundles/compiler.umd.js:16746:49) 
    at ZoneDelegate.invoke (http://127.0.0.1:8080/node_modules/zone.js/dist/zone.js:203:28) 
    at Zone.run (http://127.0.0.1:8080/node_modules/zone.js/dist/zone.js:96:43) 
    at http://127.0.0.1:8080/node_modules/zone.js/dist/zone.js:462:57 
    at ZoneDelegate.invokeTask (http://127.0.0.1:8080/node_modules/zone.js/dist/zone.js:236:37) 
    at Zone.runTask (http://127.0.0.1:8080/node_modules/zone.js/dist/zone.js:136:47) 

을

템플릿 :

<div *ngIf="loggedIn"> 
<div class='panel panel-primary'> 
    <div class='panel-heading' > 
     Shows Configuration {{loggedIn}} 
    </div> 
</div> 

구성 요소 :

import { Component, OnInit } from '@angular/core'; 
import { IShowConfig } from './iShowConfig'; 
import { AuthService } from '../../shared/AuthService'; 
import { BrowserModule } from '@angular/platform-browser'; 


@Component({ 
    // selector: 'showconfig', 
    templateUrl: 'app/showMenu/showConfig/ShowConfig.component.html' 
}) 

export class ShowConfigComponent implements OnInit { 
    pageTitle: string = 'Product List'; 
    imageWidth: number = 50; 
    imageMargin: number = 2; 
    showImage: boolean = false; 
    listFilter: string = ''; 
    errorMessage: string; 
    shows: IShowConfig[]; 
    public isLoggedIn: boolean = true; 
    // constructor(private _productService: ProductService) { 
    constructor(public authSvc: AuthService) { 
     this.isLoggedIn = true; 
     console.log(`config loggedIn: `); 
     console.log(`${AuthService.isLoggedIn}`); 
     if (authSvc.user === undefined) { 
      console.log('islogin undefine'); 
     } else { 
      console.log('config user: ' + authSvc.user); 
     } 
     console.log('show config count: ' + AuthService.count); 

    } 

    public get loggedIn(): boolean { 
     if (AuthService.isLoggedIn) { 
      return true; 
     } else { 
      return false; 
     } 
    } 
    toggleImage(): void { 
     this.showImage = !this.showImage; 
    } 

    ngOnInit(): void { } 

    onRatingClicked(message: string): void { 
     this.pageTitle = 'Show List: ' + message; 
    } 
} 

Answer 1

내가 해결책을 발견! 나는 Nicu도 그것이 무엇인지에 관해 추측했다라고 생각한다.

BrowserModule을 내 ShowConfig.module.ts에 가져 오지 않았습니다. my @ngmodule.

import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { ShowConfigComponent } from './ShowConfig.component'; 
import { AuthService } from '../../shared/AuthService'; 

import { BrowserModule } from '@angular/platform-browser';** 

@NgModule({ 
    imports: [ 

// The following line was missing 

     BrowserModule, 
     FormsModule 
     ], 
    declarations: [ 
    ShowConfigComponent 
    ], 
    providers: [ 

    ] 
}) 
export class ShowConfigModule { }