实现Angular 4 Dropdown会导致一条错误消息

Question

我正在尝试实现ng4-material-dropdown

我做的步骤：

1) 我已安装：

npm安装ng4材料下拉列表--保存2) 安装后，导入指令：

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { routing } from './app.routing';
import { AgmCoreModule } from '@agm/core';
import { customHttpProvider } from './_helpers/index';
import { AlertComponent } from './_directives/index';
import { AuthGuard } from './_guards/index';
import { AlertService, AuthenticationService, UserService } from './_services/index';
import { HomeComponent } from './home/index';
import { LoginComponent } from './login/index';
import { RegisterComponent } from './register/index';
import { HeaderComponent } from './header/header.component';
import { DashboardComponent } from './dashboard/index';
import { Ng4DropdownModule } from 'ng4-material-dropdown';
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
AgmCoreModule.forRoot({
apiKey: 'eer'
}),
Ng4DropdownModule,
routing
],
declarations: [
AppComponent,
AlertComponent,
HomeComponent,
LoginComponent,
RegisterComponent,
HeaderComponent,
DashboardComponent
],
providers: [
customHttpProvider,
AuthGuard,
AlertService,
AuthenticationService,
UserService
],
bootstrap: [AppComponent]
})

导出类AppModule｛｝

3) 我在我的dashboard.component.html文件中使用了它：

dashboard.component.html

<app-header></app-header>
<div class="container">
<ng4-dropdown>
<ng4-dropdown-menu>
<ng4-menu-item *ngFor="let item of items">
{{ item }}
</ng4-menu-item>
</ng4-dropdown-menu>
</ng4-dropdown>
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker 
[latitude]="lat"
[longitude]="lng"></agm-marker>
</agm-map>
</div>

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AlertService, AuthenticationService } from '../_services/index';
@Component({
moduleId: module.id,
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
title: string = 'My first AGM project';  
lat: number = 51.673858;
lng: number = 7.815982;
ngOnInit() {
}
pages =['abc','bca','pqr'];

constructor() {
}
}

当我尝试它时，我得到以下错误：

TypeError: Cannot read property 'setGlobalVar' of null
at _createNgProbe (ng4-dropdown.bundle.js:6944)
at eval (module.ngfactory.js? [sm]:1)
at _callFactory (core.es5.js:9574)
at _createProviderInstance$1 (core.es5.js:9503)
at initNgModule (core.es5.js:9454)
at new NgModuleRef_ (core.es5.js:10568)
at createNgModuleRef (core.es5.js:10552)
at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12861)
at NgModuleFactory_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleFactory_.create (core.es5.js:13856)
at core.es5.js:4497

你能告诉我我做错了什么吗？这个错误意味着什么？

Answer 1

我觉得这个包已经过时了。上次提交是在7个月前。我建议你使用另一个有更多支持的软件包。

• ngx引导
• ng引导程序
• 材料2
• primeNg

Answer 2

模块未初始化。您可以在nodemodule中看到ng4-dropdown.bundle.js，并搜索函数名称"initDomAdapter"。在该函数中添加调试器，它不会运行。