角度 - mat-slide-toggle 不可见 [英] angular - mat-slide-toggle is not visible
本文介绍了角度 - mat-slide-toggle 不可见的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题
<块引用>mat-slide-toggle 不可见.
我正在尝试从下面的 url
任何人都可以提出我缺少的东西，尽管我是新的角材料.
欢迎提出任何建议.
解决方案
在您的模块定义中，您忘记在 imports 部分，您需要 BrowserAnimationsModule:
@NgModule({声明: [应用组件，英雄细节组件，英雄组件，仪表板组件，英雄搜索组件，MaterialDashboard 组件，用户组件，登录组件，警报组件，注册组件，主页组件，ApiDashboard 组件，ApiDashboardformComponent,EditApiDashboard 组件，材料主题组件，登录FosUser和RestBundle组件，登录用户捆绑组件，材料测试主题组件//菜单图标示例//应用路由模块],进口:[浏览器模块，表单模块，Http模块，路由器测试模块，InMemoryWebApiModule.forRoot(InMemoryDataService, { passThruUnknownUrl: true }),//假内存API模拟//InMemoryWebApiModule.forRoot(InMemoryDataService),应用路由模块，MatSidenav模块，垫输入模块，垫菜单模块，浏览器动画模块，垫表模块，CdkTable 模块，数据表模块，//材料模块，反应形式模块，垫自动完成模块，MatFormField 模块，MatSlideToggleModule,//此处否则无法使用此模块中定义的组件 mat-slide-toggle浏览器动画模块],//导出:[MatSidenavModule,MatInputModule,MatMenuModule],出口:[CdkTable 模块，垫自动完成模块，垫按钮模块，MatButtonToggleModule，垫卡模块，MatCheckbox模块，匹配芯片模块，//MatCore模块，MatDatepicker 模块，垫对话框模块，垫扩展模块，MatGridList 模块，MatIcon模块，垫输入模块，垫列表模块，垫菜单模块，MatNativeDateModule，MatPaginator 模块，MatProgressBar 模块，MatProgressSpinnerModule，MatRadio模块，MatRipple模块，垫选择模块，MatSidenav模块，垫滑块模块，MatSlideToggleModule，MatSnackBar模块，垫排序模块，垫表模块，MatTabs 模块，垫工具栏模块，MatTooltip 模块，],架构:[CUSTOM_ELEMENTS_SCHEMA]，//在这里声明你的服务提供者:[HeroService、UserService、AlertService、AuthGuard、认证服务，用户服务，Api仪表板，ApiDashboardDataService,表单服务，用户注册服务，表单生成器，//用于创建假后端的提供程序//假后端提供者，模拟后端，基本请求选项]，引导程序:[AppComponent]})导出类 AppModule { }您没有看到任何错误，因为您使用了
架构:[CUSTOM_ELEMENTS_SCHEMA]您没有提供您的 css，但您还需要在您的样式中导入一个 Material 主题.(s)css 如:
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';你可以在这里找到一个简单的例子 https://stackblitz.com/edit/angular-eszrpl
problem
mat-slide-toggle is not visible.
I'm trying to implement this example from below url https://material.angular.io/components/autocomplete/examples.
testcomponent.html
<mat-slide-toggle
[checked]="stateCtrl.disabled"
(change)="stateCtrl.disabled ? stateCtrl.enable() : stateCtrl.disable()">
Disable Input?
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 version
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
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"></scripti have also
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
Problem
- cannot view slide toggle in front end.
snapshot.
can anyone suggest what im missing though im new angular material .
any suggestion is most welcome.
解决方案
In your module definition you forgot to add MatSlideToggleModule (you are importing the file but your app doesn't use it) in the imports section 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]
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';
You can find a simple example here https://stackblitz.com/edit/angular-eszrpl
这篇关于角度 - mat-slide-toggle 不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
