*ngIf无效

Question

我使用角度2 RC 4和*ngIf不工作这里是视图的代码

视图

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
      <span class="navbar-brand"> </span>
    </div>
    <div class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a [routerLink]="['/Home']">Home</a>
        <span style="color:red">{{auth.isAdmin}}</span>
        <span style="color:red">{{auth.isLoggedIn}}</span>
        </li>

        <li *ngIf="auth.isLoggedIn && auth.isAdmin"><a [routerLink]="['/Category']">Category</a></li>
        <li *ngIf="auth.isLoggedIn && auth.isAdmin"><a [routerLink]="['/Products']">Product</a></li>
        <li *ngIf="auth.isLoggedIn && !auth.isAdmin"><a [routerLink]="['/BuyProduct']">Buy Products</a></li>
        <li *ngIf="auth.isLoggedIn && !auth.isAdmin"><a [routerLink]="['/Cart']"><i class="fa fa-shopping-cart"></i><span class="badge" >11</span></a></li>
        <!--<li *ngIf="isLoggedIn"><a [routerLink]="['/Folder']"><i class="fa fa-shopping-cart"></i><span class="badge" >Folder</span></a></li>-->
      </ul>
      <ul class="nav navbar-nav navbar-right" *ngIf="!auth.isLoggedIn">
        <!--<li><a href="#">{{isLoggedIn}} b</a></li>-->
        <li><a [routerLink]="['/Register']">Register</a></li>
        <li><a [routerLink]="['/Login']">Login</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right" *ngIf="auth.isLoggedIn">
        <!--<li><a href="#">{{isLoggedIn}} a</a></li>-->
        <li><a [routerLink]="['/Home']">Welcome {{auth.userName}}</a></li>
        <li><a [routerLink]="['/Login']" (click)="logOut()" >Log Out</a></li>
      </ul>

    </div>
  </div>
</div>
<div class="container ">
    <router-outlet></router-outlet>
  <hr />
  <footer>
    <p>&copy; My ASP.NET Application</p>
  </footer>
</div>

零件

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router'
import {  OnInit, OnDestroy} from '@angular/core';
//import '../../public/css/styles.css';

import {CategoryComponent} from './category.component';
import {ProductComponent} from './product.component';
import {HomeComponent} from './home.component';
import {BuyProductComponent} from './buyproduct.component';
import {CartComponent} from './cart.component';
import {LoginComponent} from './login.component';
import {RegisterComponent} from './register.component';
import {FolderComponent} from './folder.component';

import { AuthService }         from '../services/auth.service';



@Component({
  selector: 'my-app',
  templateUrl: '../views/app.component.html',
  directives: [ROUTER_DIRECTIVES],
  //it's bcoz of this error Component not found in precompile array.
  precompile: [CategoryComponent,
    ProductComponent,
    HomeComponent,
    BuyProductComponent,
    CartComponent,
    LoginComponent,
    RegisterComponent,
    FolderComponent
  ],

})

export class AppComponent implements OnInit {

  ngOnInit() {
    ////debugger;
    //console.log("in ngOnInit"); 
    this.auth = this.authService.getAuthData();
  }

  auth: any = {};
  constructor(private authService: AuthService) {
    console.log("in constructor");
    console.log('calling auth data from constructor');
    authService.authChanged$.subscribe(value => {
      console.log("from authchange");
      this.auth = value;
      console.log(value);
    });


    console.log("from app component " + authService.auth.isLoggedIn);
  }
  title = "App Component";

  logOut()
  {
    this.authService.resetAuthData();
  }
}

在浏览器中截屏

Answer 1

确保拼写正确，即ngIf 不正确 ngif或ngIF等等。

Answer 2

试试这种方式 -

*ngIf="!auth.isLoggedIn == true"

我知道这很奇怪,但它对我有用

Answer 3

确保您已在 module.ts 文件中声明该组件。

我也在开发一个现有的项目，有时我的 *ngIf DIRECTIVE 不起作用ngIf 指令不起作用 ，即使我在 .ts 文件中添加了正确的语法，添加了正确的声明，但几个小时后它仍然不起作用， 我检查了声明并在 module.ts 文件中声明组件。在 module.ts 文件中声明组件

Answer 4

对我来说不幸的是，问题是我忘记导入 BrowserModule 或 CommonModule。我正在使用 Angular 9，花了 30 多分钟寻找没有丢失的东西。