* ngIf无效

Question

我正在使用 angular 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="!auth.isLoggedIn == true"

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

Answer 2

确保您的拼写正确，即 ngIf not ngif 或 ngIF 等

Answer 3

我最近遇到过此类问题，

我发现我检查的结果与UpperCase有关。

因此，例如：auth.isLoggedIn返回True，并且当*ngIf="auth.isLoggedIn"等于*ngIf="!auth.isLoggedIn === true"时，它将永远不会返回预期结果。

检查auth.isLoggedIn是否返回小写的true或false，并且不带双引号（不是"true"），或者是boolean类型！。

谢谢。

Answer 4

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

Answer 5

如果使用 ModalController 加载组件时 *ngIf 不起作用，请确认您将组件模块导入到主机模块中。

// Make sure you import MyComponent into your host component. 
 modal = await this.modalCtrl.create({
          component:  MyComponent,
          componentProps: { id: id }
        });