角材は何も表示されません

Question

私は角材で始まります。サンプルプロジェクトでは、@ angular/cdkと@ angular/materialをインストールし、app.moduleに参照を追加しました。

は、次にテンプレートで、私は単純なオブジェクト置く：

<md-checkbox>Testing </md-checkbox> 

をしかし、私はアプリを実行したときにチェックボックスが唯一の「テスト」ではなく、チェックボックスが表示されます。コンソールにエラーはありません。

app.module：

import { environment } from '../environments/environment'; 
import { HomeComponent } from './home/home.component'; 
import { RouterModule } from '@angular/router'; 
import { ServiceHTTP } from './service-http.service'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AngularFireModule} from 'angularfire2'; 
import { AngularFireDatabaseModule} from 'angularfire2/database'; 
import { AngularFireAuthModule} from 'angularfire2/auth'; 


import { AppComponent } from './app.component'; 
import { LoginComponent } from './login/login.component'; 
import { ConsultaComponent } from './consulta/consulta.component'; 
import { BsNavbarComponent } from './bs-navbar/bs-navbar.component'; 

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { MdButtonModule , MdCardModule , MdMenuModule , MdToolbarModule , MdIconModule , MdCheckbox} from '@angular/material'; 


import * as firebase from 'firebase'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    LoginComponent, 
    ConsultaComponent, 
    HomeComponent, 
    BsNavbarComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    AngularFireModule.initializeApp(environment.firebase), 
    AngularFireDatabaseModule, 
    AngularFireAuthModule, 
    BrowserAnimationsModule, 
    MdButtonModule , MdCardModule , MdMenuModule , MdToolbarModule , MdIconModule, 
    RouterModule.forRoot([ 
     {path: 'home', component: HomeComponent}, 
     {path: 'login', component: LoginComponent}, 
     {path: 'consulta', component : ConsultaComponent}  
    ]) 

    ], 
    providers: [ServiceHTTP], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

任意のアイデア？

Answer 1

問題は、モジュール全体（他の多くのアイテムを使用する）ではなく、チェックボックスのみをインポートすることです。

import { ..., MdCheckboxModule } from '@angular/material'; 

が問題を解決するはずです。

（同様にあなたの@NgModuleの輸入に追加することを忘れないでください）

Answer 2

あなたはMdCheckboxModule同様

imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    AngularFireModule.initializeApp(environment.firebase), 
    AngularFireDatabaseModule, 
    AngularFireAuthModule, 
    BrowserAnimationsModule, 
    MdButtonModule , MdCardModule , MdMenuModule , MdToolbarModule , MdCheckboxModule,MdIconModule, 
    RouterModule.forRoot([ 
     {path: 'home', component: HomeComponent}, 
     {path: 'login', component: LoginComponent}, 
     {path: 'consulta', component : ConsultaComponent}  
    ]) 

    ]