angular 2 控制台錯誤無法綁定到“ngIf”，因為它不是“span”的已知屬性

Question

請不要標記此“重復...”。 我已經閱讀了描述此錯誤的其他 SO 帖子。 我已經嘗試過這些解決方案。

如果你看一下我的代碼下面你會看到我確實有BrowserModule在app.module.ts進口的，我有CommonModule在我登錄-modal.component.ts進口，但對我來說卻仍然出現錯誤。 我的代碼中還有一些其他錯誤，不允許這些 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 bootstrap modal 加載一個組件......但我忘記在我的模塊declarations:[]包含該組件declarations:[]組件列表！

該組件由 bootstrap ng modal 渲染，但*ngIf和*ngFor失敗。 將組件添加到模塊組件列表后，一切都按預期工作。

Answer 2

試試這個：將CommonModule導入到聲明組件的模塊中。 確保它不僅在導入語句中，而且還在模塊 API 中“導入”（因此imports : [ ... ]等）。

然后您應該能夠從組件中刪除導入，並且一切都應該可以正常工作。

Module API 的imports部分用於導入模塊，以便該模塊中聲明的類可以使用該導入模塊的功能。

所以無論如何，在聲明組件的模塊頂部，執行以下操作：

import { CommonModule } from (etc).

在模塊 API 中（您應該在其中“聲明”您的組件）：

imports: [ CommonModule ]

並將其從您導入它的組件中刪除（以及其他任何地方，除非您在另一個模塊中需要它）。