无法绑定到“值”,因为它不是“ ngx-select-dropdown”的已知属性

时间:2018-09-04 12:23:14

标签: angular

我正在使用angular 4应用程序,因为我想实现下拉功能,因为我已经添加了ngx-select-dropdown插件,但奇怪的是它在angular6应用程序中有效,但在angular4应用程序中无效。在angular4应用程序中添加ngx-select-dropdown软件包之后。当我运行应用程序时,我会发现以下错误。

Can't bind to 'value' since it isn't a known property of 'ngx-select-dropdown'.
1. If 'ngx-select-dropdown' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ngx-select-dropdown' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ton>Categories</button>-->
            <!--[multiple]="false"-->
            <ngx-select-dropdown [ERROR ->][(value)]="singleSelect" [config]="config" [options]="options"></ngx-select-dropdown>

            "): ng:///NewsModule/DesktopEventsComponent.html@42:33

在遇到上述错误后,我尝试了另一个插件ng4-select2,但遇到了类似的错误。

据我说,由于属性,我遇到上述错误。我需要帮助来消除此错误。

app.module.ts

import { NgModule, Inject, NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule, APP_BASE_HREF } from '@angular/common';
import { HttpModule, Http } from '@angular/http';
import { FormsModule } from '@angular/forms';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { LocalStorageModule, LocalStorageService, ILocalStorageServiceConfig } from "angular-2-local-storage";
// i18n support
//import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
//import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { CityeoCommonModule } from './cityeo-common/cityeo-common.module';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AccountService } from "./cityeo-common/account.service";
import { PortalService } from "./cityeo-common/portal.service";
import { Configuration } from './app.constants';

// Calendar module
//import { CalendarComponent } from './calendar/calendar.component';
//import { EventsComponent } from './calendar/events/events.component';
//import { EventPopupComponent } from './calendar/event-popup/event-popup.component';
//import { ScrollWatcherDirective } from './calendar/scroll-watcher.directive';
//import { EventThumbnailComponent } from './calendar/event-thumbnail/event-thumbnail.component';
import { EventsService } from "./cityeo-common/events.service";
//
import { TransferHttp } from '../modules/transfer-http/transfer-http';

// Account module
//import { AccountComponent } from './account/account.component';
//import { AuthFormsContainerComponent } from './account/auth-forms-container/auth-forms-container.component';
//import { ForgotPasswordComponent } from './account/forgot-password/forgot-password.component';
//import { SignInComponent } from './account/sign-in/sign-in.component';
//import { SignUpComponent } from './account/sign-up/sign-up.component';
//import { SupportComponent } from './account/support/support.component';
//import { SupportService } from "./account/support.service";
//import { UtilService } from "./cityeo-common/util.service";
//

//Admin module
//import { AdminComponent } from './admin/admin.component';
//import { EventComponent } from './admin/event/event.component';
//import { CategoryComponent } from './admin/category/category.component';
//import { CityStateComponent } from './admin/city-state/city-state.component';
//import { CreditLinksComponent } from './admin/credit-links/credit-links.component';
//import { LocationComponent } from './admin/location/location.component';
//import { PhotoComponent } from './admin/photo/photo.component';
//import { PublishComponent } from './admin/publish/publish.component';

import { VideoEmbedderService } from "./cityeo-common/video-embedder.service";
import { SanitizerService } from "./cityeo-common/sanitizer.service";
import { LocationService } from "./cityeo-common/location.service";
import { TimeFormatterService } from "./cityeo-common/time-formatter.service";
import { CategoryService } from "./admin/category.service";
import { EventService } from "./admin/event.service";
//

import { LinkService } from './link.service';


//import { ConnectionResolver } from './shared/route.resolver';
//import { ORIGIN_URL } from './shared/constants/baseurl.constants';
import { TransferHttpModule } from '../modules/transfer-http/transfer-http.module';

import { SelectDropDownModule } from 'ngx-select-dropdown'

//export function createTranslateLoader(http: Http, baseHref) {
//    // Temporary Azure hack
//    if (baseHref === null && typeof window !== 'undefined') {
//        baseHref = window.location.origin;
//    }
//    // i18n files are in `wwwroot/assets/`
//    return new TranslateHttpLoader(http, `${baseHref}/assets/i18n/`, '.json');
//}

let localStorageServiceConfig: ILocalStorageServiceConfig = {
  prefix: "cityeo",
  storageType: "localStorage"
};

@NgModule({
  declarations: [
    AppComponent,
    //CalendarComponent, EventsComponent, EventPopupComponent, ScrollWatcherDirective, EventThumbnailComponent,
    //SupportComponent, AccountComponent, AuthFormsContainerComponent, ForgotPasswordComponent, SignInComponent, SignUpComponent,
    //        AdminComponent, EventComponent, CategoryComponent, CityStateComponent, CreditLinksComponent, LocationComponent, PhotoComponent, PublishComponent //admin module

    //NavMenuComponent,
    //CounterComponent,
    //UsersComponent,
    //UserDetailComponent,
    //HomeComponent,
    //ChatComponent,
    //NgxBootstrapComponent
  ],
  imports: [
    CommonModule,
    HttpModule,
    FormsModule,
    CityeoCommonModule,
    LocalStorageModule.withConfig(localStorageServiceConfig),
    NgbModule.forRoot(),
    //Ng2BootstrapModule.forRoot(), // You could also split this up if you don't want the Entire Module imported
    TransferHttpModule, // Our Http TransferData method
    AppRoutingModule,
    SelectDropDownModule,
  ],
  providers: [
    AccountService, LocalStorageService, Configuration, PortalService, LinkService,
    EventsService,
    //        EventsService, TimeFormatterService, LocationService,
    //        SupportService, UtilService, // account module
    EventService, LocationService, TimeFormatterService, CategoryService, //admin module
    TransferHttp,
    SanitizerService,
    VideoEmbedderService,
    //IsDesktopGuard,
    //UserService,
    //ConnectionResolver,
    //TranslateModule
  ],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {
}

1 个答案:

答案 0 :(得分:1)

从错误中我们可以看到您正在NewsModule中使用该组件:

ng:///NewsModule/DesktopEventsComponent.html@42:33

在您使用SelectDropDownModule模块的地方添加NewsModule,它应该可以工作。