角垫滑行杆不可见

Question

问题

垫子滑动开关不可见.

我正在尝试从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 { }

吴版

            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

• 我尝试过在hammer.js中从cdn路径加载index.html。
• 我也有 从“@BrowserAnimationsModule/platform-browser/动画”导入{}；

问题

• 无法查看前端的幻灯片切换。

快照。

​

• 有人能建议我在新的角质材料中缺少什么吗？
• 任何建议都是受欢迎的。

Answer 1

在模块定义中，您忘记在imports部分中添加imports(您正在导入文件，但应用程序不使用它)，您需要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，但您还需要以您的风格导入一个实质性主题。

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

您可以在这里找到一个简单的示例，https://stackblitz.com/edit/angular-eszrpl

Answer 2

和今天一样，在我的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"
  },