Question

我正在使用材料表单字段，但是它不能正常工作，我也已经导入了相应的模块。也没有任何控制台错误。这是我的package.json

{
    "name": "online-shop",
    "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": "^10.0.0-rc.6",
        "@angular/cdk": "^9.2.4",
        "@angular/common": "~10.0.0-rc.6",
        "@angular/compiler": "~10.0.0-rc.6",
        "@angular/core": "~10.0.0-rc.6",
        "@angular/flex-layout": "^9.0.0-beta.31",
        "@angular/forms": "~10.0.0-rc.6",
        "@angular/localize": "^9.1.11",
        "@angular/material": "^9.2.4",
        "@angular/platform-browser": "~10.0.0-rc.6",
        "@angular/platform-browser-dynamic": "~10.0.0-rc.6",
        "@angular/router": "~10.0.0-rc.6",
        "@ng-bootstrap/ng-bootstrap": "^5.3.1",
        "angular-image-slider": "0.0.9",
        "bootstrap": "^4.5.0",
        "mdb-cli": "^1.1.29",
        "rxjs": "~6.5.5",
        "tslib": "^1.10.0",
        "zone.js": "~0.10.3"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.901.9",
        "@angular/cli": "^10.0.0-rc.5",
        "@angular/compiler-cli": "~10.0.0-rc.6",
        "@angular/language-service": "~10.0.0-rc.6",
        "@types/jasmine": "~3.3.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "~8.9.4",
        "codelyzer": "^5.0.0",
        "jasmine-core": "~3.4.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~4.1.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~2.0.1",
        "karma-jasmine-html-reporter": "^1.4.0",
        "protractor": "~5.4.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.15.0",
        "typescript": "~3.9.5"
    }
}

this is my output of mat form field

Answer 1

您还需要将导入链接添加到css / scss文件中，或者根据我的说法，只需在styles.css中添加以使其对角度项目全局化，因为如果不导入Angular Material，则不知道应该应用哪个主题。导入链接：@import '@angular/material/prebuilt-themes/deeppurple-amber.css'; 或者，您也可以从官方棱角材料网站Click here for Angular Material website

中引用其他主题

角材料在angular9中无法正常工作

1 个答案: