角度4ドロップダウン使用例

Question

私は私のフォーム要素のいずれかのドロップダウンテキストを使用したいと、私はこの出くわし：ng4-material-dropdown

は、どのように私はそれを使用することができますか？私には、それはそれを使用する方法についての説明で挙げた例からも明らかではありません。

それは言う：

<ng4-dropdown> 
    <ng4-dropdown-button> 
     Open Menu 
    </ng4-dropdown-button> 
    <ng4-dropdown-menu> 
     <ng4-menu-item *ngFor="let page of pages"> 
      {{ page }} 
     </ng4-menu-item> 

     <div class='ng4-menu-divider'></div> 

     <ng4-menu-item> 
      With Divider 
     </ng4-menu-item> 
    </ng4-dropdown-menu> 
</ng4-dropdown> 

だから私は、私が唯一以下のものが必要推測何から：

<ng4-dropdown> 
    <ng4-dropdown-menu> 
    <ng4-menu-item *ngFor="let page of pages"> 
     {{ page }} 
    </ng4-menu-item> 
    </ng4-dropdown-menu> 
</ng4-dropdown> 

このページは何ですか？それはどこから来ていますか？モデルをこれに置き換えますか？提案？

EDIT：私はxxx.component.tsの呼び出されたページに配列を作成しました。ドロップダウンとして表示するための3つの要素があります。そのまま試してみましたが、次のエラーが表示されます。

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:9561) 
    at _createProviderInstance$1 (core.es5.js:9490) 
    at initNgModule (core.es5.js:9441) 
    at new NgModuleRef_ (core.es5.js:10555) 
    at createNgModuleRef (core.es5.js:10539) 
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.es5.js:12833) 
    at NgModuleFactory_.webpackJsonp.../../../core/@angular/core.es5.js.NgModuleFactory_.create (core.es5.js:13828) 
    at core.es5.js:4497 

このエラーの原因を教えてください。 npmjsプラグインのページに表示され

Answer 1

app.component.html

<ng4-dropdown> 
      <ng4-dropdown-menu> 
      <ng4-menu-item *ngFor="let page of pages"> 
       {{ page }} 
      </ng4-menu-item> 
      </ng4-dropdown-menu> 
     </ng4-dropdown> 

app.component.ts

export class AppComponent{ 
pages =['abc','bca','pqr']; 
} 

Answer 2

ページはテンプレートページです。そのプラグインを使用するコンポーネントのテンプレートにそのコードを配置します。 あなたが最初にした後、あなたがこの新しいプラグインを認識することができ、あなたのNgModuleので、あなたのアプリに追加する必要がありますインストールし、このコマンド

npm install ng4-material-dropdown --save 

を使用してプラグインをインストールします。

インポートプラグインは、例えば、あなたがあなたのexample.component.htmlにので、あなたのexample.component.ts
でそれを使用して次に

import { Ng4DropdownModule } from 'ng4-material-dropdown'; 

@NgModule({ 
    imports: [ Ng4DropdownModule ] 
    // .. 
}) 

（それはapp.module.tsファイルになります）あなたのNgModuleの輸入プロパティ配列に追加します あなたがHTMLで表示するコードを記述するので、あなたは、ドロップダウン

<ng4-dropdown> 
    <ng4-dropdown-button> 
     Open Menu 
    </ng4-dropdown-button> 
    <ng4-dropdown-menu> 
     <ng4-menu-item *ngFor="let page of pages"> 
      {{ page }} 
     </ng4-menu-item> 
     <div class='ng4-menu-divider'></div> 
     <ng4-menu-item> 
      With Divider 
     </ng4-menu-item> 
    </ng4-dropdown-menu> 
</ng4-dropdown> 

を表示したい場所のコードの下に書いて、あなたのことができます行くことができます:)