Question

[这是Angular 5]

我一直在寻找解决方案的最后一天，但我发现的一切都没有奏效。这是我尝试过的，将这些模块添加到app.module.ts以及任何子/功能模块

import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

这是我的布局：

app.module.ts - 包含SharedModule和HomeModule的导入，如以及app-routing.module.ts
shared.module.ts - 包含＆＃34; homeCard＆＃34;组件/指令
home.module.ts - 包含shared.module.ts的导入;包含我的 home组件，即使它是通过app-routing.module

home.component.html

<div *ngIf="!loading">
   <home-card class="card" [homeCard]="card1"></home-card>
</div>

抛出错误：

无法绑定到＆＃39; ngIf＆＃39;因为它不是＆lt; div;＆＃39;
的已知属性

一旦从div中删除*ngIf，它就可以正常工作。为什么它不识别*ngIf？

编辑：给想要查看home.module.ts文件的评论者：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

import { SharedModule } from '../shared/shared.module';
import { LayoutModule } from '../layout/layout.module';
import { CoreModule } from '../core/core.module';

import { HomeComponent } from './home/home.component';
import { SearchResultsComponent } from './search-results/search-results.component';
import { SearchComponent } from './search/search.component';

import { SearchService } from './search/search.service';
import { CardComponentRetrievalService } from '../shared/services/card-component-retrieval/card-component-retrieval.service';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        CommonModule,
        SharedModule
    ],
    declarations: [
        HomeComponent,
        SearchResultsComponent,
        SearchComponent
    ],
    providers: [
        SearchService,
        CardComponentRetrievalService
    ],
    exports: [
        HomeComponent
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class HomeModule { }

app.module.ts

// import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, enableProdMode, ErrorHandler, CUSTOM_ELEMENTS_SCHEMA, ViewContainerRef } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

import { $ } from 'protractor';
import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ToastModule, ToastOptions } from 'ng2-toastr/ng2-toastr';
import { CustomToastOptions } from './core/toast/custom-toast-options';

import { AboutUsModule } from './about-us/about-us.module';
import { AgentModule } from './agent/agent.module';
import { ClaimsAdminModule } from './claims-admin/claims-admin.module';
import { ContactUsModule } from './contact-us/contact-us.module';
import { CoreModule } from './core/core.module';
import { AuthModule } from './core/auth/auth.module';
// import { ExampleModule } from './example/example.module';
import { HomeModule } from './home/home.module';
import { InsuredModule } from './insured/insured.module';
import { LayoutModule } from './layout/layout.module';
import { SharedModule } from './shared/shared.module';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { AppNavbarComponent } from './layout/navbar/navbar.component';
import { HeaderComponent } from './layout/header/header.component';
import { NavbarFooterComponent } from './layout/navbar-footer/navbar-footer.component';
import { SitemapComponent } from './layout/sitemap/sitemap.component';
import { AppFooterComponent } from './layout/footer/footer.component';
import { EnvironmentOverlayComponent } from './layout/environment-overlay/environment-overlay.component';

import { CustomHttpInterceptor } from './core/interceptors/custom-http-interceptor';
import { AuthGuard } from './core/auth/guards/auth/auth.guard';
import { HasPermissionGuard } from './core/auth/guards/has-permission/has-permission.guard';
import { CustomErrorHandler } from './core/handlers/custom-error-handler/custom-error-handler';

import { NotFoundComponent } from './shared/error-pages/not-found/not-found.component';

import { LoggingService } from './core/services/logging/logging.service';
import { HttpWrapperService } from './core/services/http-wrapper/http-wrapper.service';
import { FeatureFlagService } from './core/services/feature-flag/feature-flag.service';
import { AppDataService } from './core/services/app-data/app-data.service';
import { CardComponentRetrievalService } from './shared/services/card-component-retrieval/card-component-retrieval.service';

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        // CommonModule,
        AppRoutingModule,
        HttpClientModule,
        ReactiveFormsModule,
        Ng4LoadingSpinnerModule.forRoot(),
        NgbModule.forRoot(),
        FormsModule,
        ToastModule.forRoot()
    ],
    declarations: [
        NotFoundComponent,
        AppComponent,
        AppNavbarComponent,
        HeaderComponent,
        NavbarFooterComponent,
        SitemapComponent,
        AppFooterComponent,
        EnvironmentOverlayComponent
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: CustomHttpInterceptor,
            multi: true
        },
        HttpClient,
        AuthGuard,
        HasPermissionGuard,
        {
            provide: ErrorHandler,
            useClass: CustomErrorHandler
        },
        {
            provide: ToastOptions,
            useClass: CustomToastOptions
        },
        LoggingService,
        HttpWrapperService,
        FeatureFlagService,
        AppDataService,
        CardComponentRetrievalService
    ],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

home.component.ts

import { Component, OnInit, ViewContainerRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormControl, FormGroup, FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
import { HttpErrorResponse } from '@angular/common/http';

import { ToastsManager } from 'ng2-toastr';

import { HomeCard } from '../../shared/home-card/home-card.model';
import { LinkButton } from '../../shared/link-button/link-button.model';

import { AppDataService } from '../../core/services/app-data/app-data.service';
import { CardComponentRetrievalService } from '../../shared/services/card-component-retrieval/card-component-retrieval.service';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
    loading: boolean = true;
    title: string;
    homeFormGroup: FormGroup;

    // TODO: retrieve data fromt he service to display in the card
    webinarCard: HomeCard;
    upcomingEventCard: HomeCard;
    fillerCard: HomeCard;

    constructor(
        private formBuilder: FormBuilder,
        private router: Router,
        public appDataService: AppDataService,
        private toast: ToastsManager,
        private vcr: ViewContainerRef,
        private cardComponentService: CardComponentRetrievalService
    ) {
        this.appDataService.loggingService.log('HomeComponent | ctor...');

        this.title = this.appDataService.applicationName;

        this.toast.setRootViewContainerRef(vcr);
    }

    ngOnInit() {
        this.appDataService.loggingService.log('HomeComponent | ngOnInit...');

        this.homeFormGroup = this.formBuilder.group({
            postError: new FormControl()
        });

        this.loadPage();
    }

    buildLinkButton(buttonText: string, buttonTextColor: string, icon: string, url: string): LinkButton {
        return new LinkButton(buttonText, buttonTextColor, icon, url);
    }

    private loadPage() {
        this.appDataService.loggingService.log('HomeComponent | loadPage...');

        this.appDataService.spinnerService.show();

        this.cardComponentService.getHomePageComponents()
            // tslint:disable-next-line:array-type
            .subscribe((homeCards: HomeCard[]) => {
                this.finalizePageLoad(homeCards);
            }, ((error: HttpErrorResponse) => {
                this.finalizeAndShowError(error);
            }));
    }

    // tslint:disable-next-line:array-type
    private finalizePageLoad(homeCards: HomeCard[]) {
        this.appDataService.loggingService.log('HomeComponent | finalizePageLoad | received ' + (!homeCards ? '0' : homeCards.length.toString()) + ' cards...');

        this.webinarCard = homeCards[0];
        this.upcomingEventCard = homeCards[1];
        this.fillerCard = homeCards[2];

        this.resetLoadVariables();
    }

    // tslint:disable-next-line:cyclomatic-complexity
    private finalizeAndShowError(error: any) {
        this.appDataService.loggingService.error('HomeComponent | finalizeAndShowError | ' + JSON.stringify(error));

        this.resetLoadVariables();

        this.appDataService.routeToErrorPage(error);
    }

    private resetLoadVariables() {
        this.appDataService.spinnerService.hide();
        this.loading = false;
    }

    showToast() {
        this.appDataService.loggingService.log('HomeComponent | showToast...');

        this.toast.success('Yay! We can see toast messages...', 'Hello');
    }

    private setError(formControlName: string, validationErrorType: string, errorString: string) {
        this.homeFormGroup
            .get(formControlName)
            .setErrors({ [validationErrorType]: errorString });
    }
}

APP-routing.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// import { LayoutModule } from './layout/layout.module';
// import { SharedModule } from './shared/shared.module';

import { HomeComponent } from './home/home/home.component';
import { LoginComponent } from './core/auth/login/login.component';
import { NotFoundComponent } from './shared/error-pages/not-found/not-found.component';

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'login', component: LoginComponent },
    { path: '**', component: NotFoundComponent }
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes),
        // SharedModule,
        // LayoutModule
    ],
    declarations: [
        HomeComponent,
        LoginComponent
    ],
    exports: [
        RouterModule
    ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})

export class AppRoutingModule { }

获取错误无法绑定到＆＃39; ngIf＆＃39;因为它不是＆＃39; div＆＃39;

0 个答案: