Angular 6 无法绑定到“*ngIf”，因为它不是已知属性

Question

In Angular 6 module, I have 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 { }

Also, I've 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>

In browser I got errors

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

and

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

Also I've tried with added CommonModule , but it still gives error.

Answer 1

Footer component is part of the app module, please check it again. If it's not then you need to import a common module in the parent module of the footer.component .

Or try this:

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

Answer 2

you need to add in same component also import { CommonModule } from '@angular/common'; then it will work. if you only provide in app.module.ts not enough. import in app.component.ts also it will work

Answer 3

Add FooterComponent in declaration.

declarations: [
    AppComponent.
    FooterComponent 
]

Answer 4

remove (hrefUrlFor -> (

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

Answer 5

solution 1: u didn't close parenthesis after creator -----------

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

solution 2: try this syntax (remove parenthesis and Apostrophe from creator)

Answer 6

Looks like component template footer.component.html is not rendering anything if condition is false. Add a blank div or span above footer and than it will work.