Eckiges Material zeigt nichts

Question

Ich beginne mit eckigem Material. In einem Beispielprojekt habe ich @ angular/cdk und @ angular/material installiert und Referenzen zu app.module hinzugefügt.

Dann in einer Vorlage habe ich ein einfaches Objekt:

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

Aber wenn ich die App das Kontrollkästchen zeigt nur „Testing“ und nicht das Kontrollkästchen ausführen. Kein Fehler auf der Konsole.

Die 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 { } 

Irgendwelche Ideen?

Answer 1

Das Problem ist, dass Sie nur das Kontrollkästchen importieren, und nicht das gesamte Modul (das viele andere Elemente verwendet).

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

sollte das Problem lösen!

(vergessen Sie nicht, es zu Ihrem @NgModule Importe als auch hinzufügen)

Answer 2

Sie müssen importieren MdCheckboxModule sowie

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}  
    ]) 

    ]