angular 2 控制台错误无法绑定到“ngIf”，因为它不是“span”的已知属性

Question

请不要标记此“重复...”。我已阅读描述此错误的其他 SO 帖子。我已经尝试过这些解决方案。

如果您查看下面的代码，您会看到我确实在 app.module.ts 中导入了 BrowserModule，并且在我的 login-modal.component.ts 中导入了 CommonModule，但是这个错误仍然存​​在我。我的代码中还有一些其他错误不允许这些 SO 解决方案为我工作。

控制台错误在底部。

非常感谢您分享您的专业知识。我被困住了：-/

// ----------------------------------------------------------------------------
// src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AngularFireModule } from 'angularfire2';
import { firebaseConfig } from './../environments/firebase.config';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HomeModule } from './home/home.module';

import { AuthGuard } from './auth.service';
import { routes } from './app.routes';

import { AppComponent } from './app.component';
import { GameComponent } from './game/game.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { EmailComponent } from './email/email.component';
import { SignupComponent } from './signup/signup.component';
import { MembersComponent } from './members/members.component';


@NgModule({
     declarations: [
          AppComponent,
          LoginComponent,
          EmailComponent,
          SignupComponent,
          GameComponent,
          MembersComponent,
     ],
     imports: [
          BrowserModule,
          FormsModule,
          HttpModule,
          AngularFireModule.initializeApp(firebaseConfig),
          HomeModule,
          NgbModule.forRoot(),
          routes
     ],
     providers: [AuthGuard],
     bootstrap: [AppComponent]
})
export class AppModule { }


// ----------------------------------------------------------------------------
// src/app/login-model.component.ts

import { NgModule, Component, Input, OnInit, HostBinding } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2';
import { Router } from '@angular/router';
import { moveIn } from '../router.animations';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'app-login-modal',
    template: `
    <div class="modal-header">
        <h4 class="modal-title">Please login...</h4>
        <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div class="form-container">
        <img src="assets/images/lock.svg" id="lock">

        <span class="error" *ngIf="error">{{ error }}</span>

        <button class="social-btn" (click)="loginFb()" id="fb">Login with Facebook</button><br>
        <button class="social-btn" (click)="loginGoogle()" id="google">Login with Google</button>
        <button class="social-btn" routerLink="/login-email" id="email">Email</button>

        <a routerLink="/signup" routerLinkActive="active" class="alc">No account? <strong>Create one here</strong></a>

        </div>
    </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
    </div>
    `
})
export class LoginModalComponent {
    @Input() name;
    public error: any;

    constructor(public activeModal: NgbActiveModal, private modalService: NgbModal,
        public af: AngularFire, private router: Router) {
        // this.af.auth.subscribe(auth => {
        //     if (auth) {
        //         this.router.navigateByUrl('/members');
        //     }
        // });
    }

    public open() {
        const modalRef = this.modalService.open(this);
        modalRef.componentInstance.name = 'World';
    }

    loginFb() {
        this.af.auth.login({
            provider: AuthProviders.Facebook,
            method: AuthMethods.Popup,
        }).then(
            (success) => {
                this.router.navigate(['/home']);
            }).catch(
            (err) => {
                this.error = err;
            })
    }

    loginGoogle() {
        this.af.auth.login({
            provider: AuthProviders.Google,
            method: AuthMethods.Popup,
        }).then(
            (success) => {
                this.router.navigate(['/home']);
            }).catch(
            (err) => {
                this.error = err;
            });
    }
}

@NgModule({
    declarations: [LoginModalComponent],
    imports: [
        CommonModule,
        NgbModal,
        NgbActiveModal,
        AngularFire
    ]
})
export class LoginModalModule {
}

编辑：取得了一点进展

接受您的所有建议，我已经取得了一些进展。页面加载没有错误，但现在错误是@NgModule.entryComponent。我以为我知道如何解决这个问题，但是添加到 entryComponents 不起作用。

这是新代码...

// ----------------------------------------------------------------------------
// src/app/home/home.component.ts

import { Component, OnInit } from '@angular/core';
import { LoginModalComponent } from './../modal/login-modal.component';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
    constructor(public loginModal: LoginModalComponent) { }

    public showLoginModal() {
        console.log('Inside home.component.showLoginModal()');
        this.loginModal.open();
    }

    ngOnInit() {
    }
}


// ----------------------------------------------------------------------------
// src/app/home/home.module.ts

import { NgModule } from '@angular/core';
import { NgbModalModule, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { LoginModalModule, LoginModalComponent } from './../modal/login-modal.component';
import { HomeComponent } from './home.component';

@NgModule({
    imports: [LoginModalModule],
    declarations: [HomeComponent],
    providers: [NgbActiveModal, LoginModalComponent]
})
export class HomeModule {

}


// ----------------------------------------------------------------------------
// src/app/login-model.component.ts

import { NgModule, Component, Input, OnInit, HostBinding } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2';
import { Router } from '@angular/router';
import { moveIn } from '../router.animations';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
    selector: 'ngb-login-modal',
    template: `
    <div class="modal-header">
        <h4 class="modal-title">Please login...</h4>
        <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <div class="form-container">
        <img src="assets/images/lock.svg" id="lock">

        <span class="error" *ngIf="error">{{ error }}</span>

        <button class="social-btn" (click)="loginFb()" id="fb">Login with Facebook</button><br>
        <button class="social-btn" (click)="loginGoogle()" id="google">Login with Google</button>
        <button class="social-btn" routerLink="/login-email" id="email">Email</button>

        <a routerLink="/signup" routerLinkActive="active" class="alc">No account? <strong>Create one here</strong></a>

        </div>
    </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
    </div>
    `
})
export class LoginModalComponent {
    @Input() name;
    public error: any;

    constructor(public modalService: NgbModal, public activeModal: NgbActiveModal,
        public af: AngularFire, private router: Router) {
        // this.af.auth.subscribe(auth => {
        //     if (auth) {
        //         this.router.navigateByUrl('/members');
        //     }
        // });
    }

    public open() {
        const modalRef = this.modalService.open(this.activeModal);
        modalRef.componentInstance.name = 'World';
    }

    loginFb() {
        this.af.auth.login({
            provider: AuthProviders.Facebook,
            method: AuthMethods.Popup,
        }).then(
            (success) => {
                this.router.navigate(['/home']);
            }).catch(
            (err) => {
                this.error = err;
            })
    }

    loginGoogle() {
        this.af.auth.login({
            provider: AuthProviders.Google,
            method: AuthMethods.Popup,
        }).then(
            (success) => {
                this.router.navigate(['/home']);
            }).catch(
            (err) => {
                this.error = err;
            });
    }
}

@NgModule({
    declarations: [LoginModalComponent],
    imports: [
        CommonModule
    ]
})
export class LoginModalModule {
}

这是控制台中新的@NgModule.entryComponent 错误...

Answer 1

就我而言，我试图通过 Angular 引导模式加载组件... 但我忘记在我的模块declarations:[] 组件列表中包含该组件！

组件由 bootstrap ng modal 渲染，但 *ngIf 和 *ngFor 失败。 将组件添加到模块组件列表后，一切都按预期工作。

Answer 2

试试这个：将CommonModule 导入到声明组件的模块中。确保它不仅在导入语句中，而且在模块 API 中的“导入”（如 imports : [ ... ] 等）。

然后您应该能够从组件中删除导入，并且一切都应该工作。

Module API 的imports 部分用于导入模块，以便该模块中声明的类可以使用该导入模块的功能。

无论如何，声明组件的模块顶部，这样做：

import { CommonModule } from (etc).

在 Module API 中（您应该在其中“声明”您的组件）：

imports: [ CommonModule ]

并从您导入它的组件中删除它（以及其他任何地方，除非您在另一个模块中需要它）。