问题
mat-slide-toggle不可见。
我尝试从以下网址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
我试图从index.html
中的cdn路径加载hammer.js <script src="https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"></script
我也
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
问题
任何人都可以提出即使是新的棱角分明物质也会缺少什么。
欢迎提出任何建议。
答案 0 :(得分:2)
在您的模块定义中,您忘记在imports
部分添加MatSlideToggleModule(您正在导入文件但您的应用并未使用它),您需要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 { }
您没有看到任何错误,因为您使用
schemas: [CUSTOM_ELEMENTS_SCHEMA]
你没有提供你的css,但你还需要以你的风格导入一个物质主题。(s)css如:
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
您可以在此处找到一个简单示例https://stackblitz.com/edit/angular-eszrpl
答案 1 :(得分:0)
和今天一样,我在 angular.json 中使用这个主题时遇到了同样的问题:
"styles": [
"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.css"
],
我的显示或主题本身或其他方面有问题,但是当我将主题更改为靛蓝色(如下所示)时,滑块变得非常明显,无需任何额外努力:
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
我目前并不担心主题,但想到了分享,因为我正在到处寻找解决方案以了解为什么滑块不可见。我的 package.json 中的依赖项如下所示:
"dependencies": {
"@angular/animations": "~11.2.7",
"@angular/cdk": "^11.2.7",
"@angular/common": "~11.2.7",
"@angular/compiler": "~11.2.7",
"@angular/core": "~11.2.7",
"@angular/forms": "~11.2.7",
"@angular/material": "^11.2.7",
"@angular/platform-browser": "~11.2.7",
"@angular/platform-browser-dynamic": "~11.2.7",
"@angular/router": "~11.2.7",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.3"
},