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

Question

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

我做的步骤：

1)我已经安装了：

npm install ng4-material-dropdown --save 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-bootstrap
• ng-bootstrap
• material2
• primeNg

Answer 2

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