Angular 2+ mat-checkbox 错误查看

Question

我正在使用（学习）Angular 2+，但我遇到了一个问题。 mat-checkbox 的显示/样式错误。 mat-checkbox 中有复选框。 看起来有一些风格冲突，但我不知道在哪里。 复选框的功能还可以，只有 mat-checkbox 样式的视图不好。 请问有什么想法吗？ 我什至尝试过 bootstrap 4.6 复选框，但他们的视图也是默认的，没有任何样式。

查看：在此处输入图像描述

组件 HTML （没有自定义 css 样式）：

<h3>Area Selection</h3>
<hr/>
<div *ngFor="let area of areas; let i = index">
  <mat-checkbox class="green" [checked]="areaBools[i]" (change)="onChange(i)">
    {{ area.areaEn }}
  </mat-checkbox>
</div>
<hr/>

应用程序模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {MathJaxDirective} from './mathjax.directive'

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { HomeComponent } from './home/home.component';
import { SettingsComponent } from './settings/settings.component';
import { AreaService } from './services/area.service';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ProblemsComponent } from './problems/problems.component';
import { SubareaService } from './services/subarea.service';
import { ProblemService } from './services/problem.service';
import { CreateTestComponent } from './create-test/create-test.component';
import { FormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon'
import {MatCheckboxModule} from '@angular/material/checkbox';
import { CommonModule } from '@angular/common';

export const appRoutes: Routes = [
  {path: '', component: HomeComponent, data: {page: "HOME"}},
  {path: 'problems/:id/:subid/:lvlid/:filter', component: ProblemsComponent, data: {page: "DATABASE"}},
  {path: 'create/:id/:subid/:lvlid/:rating', component: CreateTestComponent},
  {path: 'settings', component: SettingsComponent, data: {page: "SETTINGS"}},
  //{path: 'edit', component: TestEditComponent},
  //{path: '_run', component: TestRunComponent},
  //{path: 'material', component: DemoMaterialComponent},
  {path: '**', redirectTo: '/', pathMatch: 'full'}
];


@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    HomeComponent,
    SettingsComponent,
    ProblemsComponent,
    MathJaxDirective,
    CreateTestComponent
  ],
  imports: [
    BrowserModule,
    FlexLayoutModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes),
    FormsModule,
    MatIconModule,
    MatCheckboxModule,
    CommonModule
  ],
  providers: [
    AreaService,
    SubareaService,
    ProblemService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

angular.json：

{
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
        "teacher": {
            "projectType": "application",
            "schematics": {
                "@schematics/angular:application": {
                    "strict": true
                }
            },
            "root": "",
            "sourceRoot": "src",
            "prefix": "app",
            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/teacher",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "aot": true,
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "src/styles.css",
                            "node_modules/bootstrap/dist/css/bootstrap.min.css"
                        ],
                        "scripts": [
                            "./node_modules/jquery/dist/jquery.min.js",
                            "./node_modules/bootstrap/dist/js/bootstrap.bundle.js"
                        ]
                    },
                    "configurations": {
                        "production": {
                            "fileReplacements": [{
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod.ts"
                            }],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "namedChunks": false,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [{
                                    "type": "initial",
                                    "maximumWarning": "500kb",
                                    "maximumError": "1mb"
                                },
                                {
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "2kb",
                                    "maximumError": "4kb"
                                }
                            ]
                        }
                    }
                },
                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": {
                        "browserTarget": "teacher:build"
                    },
                    "configurations": {
                        "production": {
                            "browserTarget": "teacher:build:production"
                        }
                    }
                },
                "extract-i18n": {
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": {
                        "browserTarget": "teacher:build"
                    }
                },
                "test": {
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": {
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.spec.json",
                        "karmaConfig": "karma.conf.js",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "src/styles.css"
                        ],
                        "scripts": []
                    }
                },
                "lint": {
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": {
                        "tsConfig": [
                            "tsconfig.app.json",
                            "tsconfig.spec.json",
                            "e2e/tsconfig.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    }
                },
                "e2e": {
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": {
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "teacher:serve"
                    },
                    "configurations": {
                        "production": {
                            "devServerTarget": "teacher:serve:production"
                        }
                    }
                }
            }
        }
    },
    "defaultProject": "teacher",
    "cli": {
        "analytics": "86d68494-50a7-4f37-b27b-5f0074ddb6a8"
    }
}

package.json：

{
  "name": "teacher",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.0.1",
    "@angular/cdk": "^11.0.2",
    "@angular/common": "~11.0.1",
    "@angular/compiler": "~11.0.1",
    "@angular/core": "~11.0.1",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "~11.0.1",
    "@angular/material": "^11.0.2",
    "@angular/platform-browser": "~11.0.1",
    "@angular/platform-browser-dynamic": "~11.0.1",
    "@angular/router": "~11.0.1",
    "@types/mathjax": "0.0.36",
    "bootstrap": "^4.6.0",
    "bootstrap-icons": "^1.4.1",
    "jQuery": "^1.7.4",
    "jquery": "^3.6.0",
    "popper": "^0.1.0",
    "popper.js": "^1.16.1",
    "postcss-loader": "^5.2.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.2",
    "@angular/cli": "~11.0.2",
    "@angular/compiler-cli": "~11.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

Answer 1

尝试在angular.json styles 数组中添加默认主题：

"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",

否则，请检查您是否在app/styles.css 中找到此 css ：

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

我不知道你是如何安装 Angular-material 的，但是使用ng add @angular/material ，所有这些东西都会自动为你完成。 有时，对于某些版本，您只需要使用ng serve重新编译应用程序。

另一件事，我建议您为路由创建一个单独的模块。 这种方式很混乱，如果你有很多代码要分享，请加个stackblitz。