角度-看不见mat-slide-toggle [英] angular - mat-slide-toggle is not visible
本文介绍了角度-看不见mat-slide-toggle的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题
mat-slide-toggle不可见.
mat-slide-toggle is not visible.
我正在尝试从以下网址实施此示例:url https://material.angular. io/components/autocomplete/examples .
I'm trying to implement this example from below url https://material.angular.io/components/autocomplete/examples.
testcomponent.html
testcomponent.html
<mat-slide-toggle
[checked]="stateCtrl.disabled"
(change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
Disable Input?
app.module.ts
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule,Component, ElementRef, ViewChild,Pipe,PipeTransform,CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
//import service libraries declare all services used in project here//
import { HeroService } from './hero.service';
import { UserService } from './user.service';
import { AlertService } from './alert.service';
import {AuthenticationService } from './authentication.service';
import { ApiDashboard } from './api-dashboard';
import { ApiDashboardDataService } from './api-dashboard-data.service';
import {FormService} from './form.service';
import {UserRegistrationService} from './user-registration.service';
//services closed//
//import {DataTableModule} from "angular2-datatable";
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { HeroesComponent } from './heroes/heroes.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import {RouterTestingModule} from '@angular/router/testing';
import { AppRoutingModule } from './app-routing/app-routing.module';
// used to create fake backend
//import { fakeBackendProvider } from './helpers/fake-backend';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { BaseRequestOptions } from '@angular/http';
//import { routing } from '../app-routing';
import { AuthGuard } from './auth.guard';
// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';
import { HeroSearchComponent } from './hero-search/hero-search.component';
import { MaterialDashboardComponent } from './material-dashboard/material-dashboard.component';
//import {MatSidenavModule} from '@angular/material';
import { UserComponent } from './user/user.component';
import {Http, Response} from '@angular/http';
import {LoginComponent} from './login/login.component';
import { AlertComponent } from './alert/alert.component';
import { RegisterComponent } from './register/register.component';
//import {MatMenuModule} from '@angular/material';
//component for input fields
//import {MatInputModule} from '@angular/material';
import { HomeComponent } from './home/home.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {CdkTableModule} from '@angular/cdk/table';
import { DataTablesModule } from 'angular-datatables';
//import { MaterialModule,MatAutocompleteModule, MatFormFieldModule } from '@angular/material';
import { MatFormFieldModule } from '@angular/material';
import {MATERIAL_COMPATIBILITY_MODE} from '@angular/material';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
//MatCoreModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
} from '@angular/material';
//import {MenuIconsExample} from './menu-icons-example';
//import {HttpModule} from '@angular/http';
import { ApiDashboardComponent } from './api-dashboard/api-dashboard.component';
import { ApiDashboardformComponent } from './api-dashboardform/api-dashboardform.component';
import { EditApiDashboardComponent } from './edit-api-dashboard/edit-api-dashboard.component';
import { MaterialThemeComponent } from './material-theme/material-theme.component';
import { LoginFosUserandRestBundleComponent } from './login-fos-userand-rest-bundle/login-fos-userand-rest-bundle.component';
import { LoginuserbundleComponent } from './loginuserbundle/loginuserbundle.component';
import { FormGroup, FormBuilder } from '@angular/forms';
import { MaterialTestthemeComponent } from './material-testtheme/material-testtheme.component';
//import {FlashMessagesModule} from 'angular2-flash-messages/module';
//import {Mat2Module} from 'Mat2';
//import {HttpModule} from '@angular/http';
//import {CdkTableModule} from '@angular/cdk';
@NgModule({
declarations: [
AppComponent,
HeroDetailComponent,
HeroesComponent,
DashboardComponent,
HeroSearchComponent,
MaterialDashboardComponent,
UserComponent,
LoginComponent,
AlertComponent,
RegisterComponent,
HomeComponent,
ApiDashboardComponent,
ApiDashboardformComponent,
EditApiDashboardComponent,
MaterialThemeComponent,
LoginFosUserandRestBundleComponent,
LoginuserbundleComponent,
MaterialTestthemeComponent
//MenuIconsExample
//AppRoutingModule
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterTestingModule,
InMemoryWebApiModule.forRoot(InMemoryDataService, {passThruUnknownUrl: true}), // fake in memory API simulation
// InMemoryWebApiModule.forRoot(InMemoryDataService),
AppRoutingModule,
MatSidenavModule,
MatInputModule,
MatMenuModule,
BrowserAnimationsModule,
MatTableModule,
CdkTableModule,
DataTablesModule,
//MaterialModule,
ReactiveFormsModule,
MatAutocompleteModule,
MatFormFieldModule,
//Mat2Module
],
//exports: [MatSidenavModule,MatInputModule,MatMenuModule],
exports: [
CdkTableModule,
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
//MatCoreModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
//declare your service here
providers: [HeroService,UserService,AlertService,AuthGuard,
AuthenticationService,
UserService,
ApiDashboard,
ApiDashboardDataService,
FormService,
UserRegistrationService,
FormBuilder,
// providers used to create fake backend
// fakeBackendProvider,
MockBackend,
BaseRequestOptions],
bootstrap: [AppComponent]
})
export class AppModule { }
ng版本
OS: win32 x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped
@angular/animation: 4.0.0-beta.8
@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.6.7
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.7
@schematics/angular: 0.1.17
typescript: 2.7.1
webpack: 3.10.0
-
我尝试从index.html中的CDN路径加载Hammer.js
i have tried to load hammer.js from cdn path in index.html
<script src="https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"></script-
我也有
i have also
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';- 无法查看前端的幻灯片切换器.
-
谁能建议我虽然是新的棱角材料，但仍缺少什么.
can anyone suggest what im missing though im new angular material .
问题
快照.
任何建议都是最欢迎的.
any suggestion is most welcome.
推荐答案
在模块定义中，您忘记了在
imports部分中添加MatSlideToggleModule(您正在导入文件，但您的应用未使用它)，您需要BrowserAnimationsModule:In your module definition you forgot to add MatSlideToggleModule (you are importing the file but your app doesn't use it) in the
importssection and you need BrowserAnimationsModule:@NgModule({ declarations: [ AppComponent, HeroDetailComponent, HeroesComponent, DashboardComponent, HeroSearchComponent, MaterialDashboardComponent, UserComponent, LoginComponent, AlertComponent, RegisterComponent, HomeComponent, ApiDashboardComponent, ApiDashboardformComponent, EditApiDashboardComponent, MaterialThemeComponent, LoginFosUserandRestBundleComponent, LoginuserbundleComponent, MaterialTestthemeComponent //MenuIconsExample //AppRoutingModule ], imports: [ BrowserModule, FormsModule, HttpModule, RouterTestingModule, InMemoryWebApiModule.forRoot(InMemoryDataService, { passThruUnknownUrl: true }), // fake in memory API simulation // InMemoryWebApiModule.forRoot(InMemoryDataService), AppRoutingModule, MatSidenavModule, MatInputModule, MatMenuModule, BrowserAnimationsModule, MatTableModule, CdkTableModule, DataTablesModule, //MaterialModule, ReactiveFormsModule, MatAutocompleteModule, MatFormFieldModule, MatSlideToggleModule, // here otherwise it's not possible to use the component mat-slide-toggle defined in this module BrowserAnimationsModule ], //exports: [MatSidenavModule,MatInputModule,MatMenuModule], exports: [ CdkTableModule, MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, //MatCoreModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, ], schemas: [CUSTOM_ELEMENTS_SCHEMA], //declare your service here providers: [HeroService, UserService, AlertService, AuthGuard, AuthenticationService, UserService, ApiDashboard, ApiDashboardDataService, FormService, UserRegistrationService, FormBuilder, // providers used to create fake backend // fakeBackendProvider, MockBackend, BaseRequestOptions], bootstrap: [AppComponent] }) export class AppModule { }您没有看到任何错误，因为您使用
You didn't see any error because you use
schemas: [CUSTOM_ELEMENTS_SCHEMA]您没有提供CSS，但是您还需要以您的样式导入材质主题.css类似于:
You didn't provide your css but you will also need to import a material theme in your style.(s)css like:
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';您可以在此处找到一个简单的示例 https://stackblitz.com/edit/angular-eszrpl
You can find a simple example here https://stackblitz.com/edit/angular-eszrpl
这篇关于角度-看不见mat-slide-toggle的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
