html - Angular 6 无法绑定(bind)到 '*ngIf'，因为它不是已知属性

Question

在 Angular 6 模块中，我有 app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';  
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        CommonModule 
        AppRoutingModule,
        BrowserModule,
        BrowserAnimationsModule,
    ],
    providers: [],
    bootstrap: [
        AppComponent
    ]   
export class AppModule { }

另外，我还有 footer.component.htmlhtml

<footer id="footer" *ngIf="(hrefUrlFor =='creator')">
   <div class="container">
        <ul class="social full_sec">
            <li>Help Center</li>
            <li>Media Center</li>
        </ul>
   </div>
</footer>

在浏览器中出现错误

«Can't bind to 'ngIf' since it isn't a known property of 'footer'. »

和

«Property binding ngIf not used by any directive on an embedded template.»

我也试过添加CommonModule，但还是报错。

Answer 1

Footer组件是app模块的一部分，请重新检查。如果不是，那么您需要在 footer.component 的父模块中导入一个公共(public)模块。

或者试试这个:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';  
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { FooterComponent } from 'your footer component path';

@NgModule({
  declarations: [
      AppComponent,
      FooterComponent
  ],
  imports: [
      CommonModule 
      AppRoutingModule,
      BrowserModule,
      BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [
      AppComponent
  ]
})