Angular 6 无法绑定到“\*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.html html

 <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>

在浏览器中出现错误

«无法绑定到“ngIf”，因为它不是“页脚”的已知属性。 »

和

«属性绑定 ngIf 未被嵌入式模板上的任何指令使用。»

我也试过添加 CommonModule ，但它仍然会出错。

原文由 Jenny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

或者试试这个：

 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
  ]
})

原文由 chirag sorathiya 发布，翻译遵循 CC BY-SA 4.0 许可协议