*ngIf 在某些部分可以正常工作，但在其他部分则不行。 Angular 2.0.x

Question

我试图在一个简单的组件中使用 *ngIf，但 angular 在 *ngIf 上抛出错误。

删除 "*ngIf="loggedIn" 并运行。{{loggedIn}} 在登录后显示 true，在登录前显示 false。

主应用使用相同的 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 即：我的 @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 { }

*ngIf 在某些部分可以正常工作，但在其他部分则不行。 Angular 2.0.x

*ngIf works OK in some parts, but not in others. Angular 2.0.x

angular-ng-if

angular2-directives