mat-card 在我的角度应用程序中不起作用

Posted 2023-03-13

【中文标题】mat-card 在我的角度应用程序中不起作用

【英文标题】：mat-card not working in my angular application

【发布时间】：2020-01-06 14:09:24

【问题描述】：

我正在尝试在我的 Angular 应用程序中创建一个登录页面。

我的代码

<mat-card class="login">
    <mat-card-content>
              <div class="example-small-box mat-elevation-z4">
                  <form class="example-form">
                      <mat-form-field class="email example-full-width">
                        <input  matInput placeholder="Email or User name" [(ngModel)]="username" name="username" required >
                      </mat-form-field>
                    
                      <mat-form-field class="example-full-width">
                        <input matInput placeholder="Password" [(ngModel)]="password"type="password" name="password" required>
                      </mat-form-field>
                    </form>  
  
  
                    <button class="btn" mat-raised-button color="primary" (click)="login()" >Login</button>
                 </div>
           
    </mat-card-content>
  </mat-card> 

看起来像这样。

背景颜色是因为给定的css。

垫卡未显示，空间方向也不正确。我已经导入了所有需求。

app.module.ts

import  BrowserModule  from '@angular/platform-browser';
import  NgModule  from '@angular/core';

import  AppRoutingModule  from './app-routing.module';
import  AppComponent  from './app.component';
import  AhuComponent  from './ahu/ahu.component';
import  FlexLayoutModule  from '@angular/flex-layout';
import  LoginComponent  from './login/login.component';
import  PageNotFoundComponent  from './page-not-found/page-not-found.component';
import MatCardModule from '@angular/material/card';
import MatTabsModule from '@angular/material/tabs';
import MatFormFieldModule from '@angular/material/form-field';
import  FormsModule, ReactiveFormsModule  from '@angular/forms';
import MatInputModule, MatButtonModule from '@angular/material';
import  BrowserAnimationsModule  from "@angular/platform-browser/animations";

@NgModule(
  declarations: [
    AppComponent,
    AhuComponent,
    LoginComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    AppRoutingModule,
    FlexLayoutModule,
    MatCardModule,
    MatTabsModule,
    MatFormFieldModule,
    FormsModule,
    MatInputModule,
    MatButtonModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule  

我之前在另一个项目中使用了相同的代码，效果很好。但这一次它不起作用。有人可以帮我吗

根据 cmets，angular.json 进行编辑

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": 
    "BMS": 
      "projectType": "application",
      "schematics": ,
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": 
        "build": 
          "builder": "@angular-devkit/build-angular:browser",
          "options": 
            "outputPath": "dist/BMS",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          ,
          "configurations": 
            "production": 
              "fileReplacements": [
                
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                ,
                
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                
              ]
            
          
        ,
        "serve": 
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": 
            "browserTarget": "BMS:build"
          ,
          "configurations": 
            "production": 
              "browserTarget": "BMS:build:production"
            
          
        ,
        "extract-i18n": 
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": 
            "browserTarget": "BMS: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": "BMS:serve"
          ,
          "configurations": 
            "production": 
              "devServerTarget": "BMS:serve:production"
            
          
        
      
    ,
  "defaultProject": "BMS"

【问题讨论】：

你能从你的 angular.json 文件中添加代码吗？

【参考方案1】：

首先，验证您的 Angular 版本与 Material 版本是否足够

如果不是问题，你可能忘记了 CSS，将 import 添加到你的 styles.css 文件中。

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

【讨论】：

我的材质版本是6.9.0，角度版本是8.2.2

您的材料版本似乎已过期

【参考方案2】：

您可能忘记在 Angular.json 文件中将材质样式添加到您的 Angular 应用程序中，您应该有这样的内容

      "build": 
        "builder": "@angular-devkit/build-angular:browser",
        "options": 
          .
          .
          .
          "styles": [
            "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
            "src/styles.scss"
          ],
          .
          .
          .
        ,

或者您可以直接将其添加到您的 css/scss 文件中，如入门文档 https://material.angular.io/guide/getting-started#step-4-include-a-theme 中所引用的那样

【讨论】：

我已经完成了npm install --save @angular/material @angular/cdk @angular/animations 还不够吗？

不，这还不够。幸运的是，官方网站material.angular.io/guide/getting-started有一个入门指南