Angular 材料在 Angular 9 中不起作用

Question

我在 Angular 9 中使用 Angular Material，但它不适合我。它正在编译和运行，但每次我在我的 HTML 中使用 Angular Material（例如 mat-checkbox 或 mat-form-field）时，它都无法正常工作。我什至尝试直接从 material.angular.io 复制代码，但仍然无法正常工作。

我圈出了我想要做的那个。我的结果是这样的：

代码是相同的，只是我使用了不同的占位符和标签，并且我没有使用 mat-h​​int 功能。我已经在我的 app.module.ts 中正确导入了模块，所以我不知道出了什么问题。这是我使用的代码。

<div class="false" *ngIf="!authorized">
      <h4>In order to complete the sign up process, we need the authorized person from your organization <br>to review our terms and conditions. You can send them an email below.</h4>
      <br>
            <mat-form-field appearance="fill">
              <mat-label>Authorized Person's Name</mat-label>
              <input matInput placeholder="Authorized Person's Name">
              <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
            </mat-form-field>
      <br>
      <button mat-button class="email">Send Email</button>
</div>

我有什么遗漏吗？ 提前致谢！

更新：这是我的 app.module

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatCardModule } from '@angular/material/card';
import  { MatCheckboxModule } from '@angular/material/checkbox';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MatRadioModule } from '@angular/material/radio';
import { PortalComponent } from './portal/portal.component';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field'
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    PortalComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    FlexLayoutModule,
    MatCardModule,
    MatCheckboxModule,
    MatRadioModule,
    MatButtonModule,
    FormsModule,
    MatFormFieldModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

在你的app.module.ts

import {MatFormFieldModule} from '@angular/material/form-field';

然后在你的component.ts

<div class="false" *ngIf="!authorized">
  <h4>In order to complete the sign up process, we need the authorized person from your organization <br>to review our terms and conditions. You can send them an email below.</h4>
  <p>
    <mat-form-field appearance="fill">
      <mat-label>Authorized Person's Name</mat-label>
      <input matInput placeholder="Authorized Person's Name">
      <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    </mat-form-field>
  </p>
  <button mat-button class="email">Send Email</button>
</div>

Answer 2

结果基于@angular/material 的安装方式，结果不会相同。如果它是使用 npm 安装的，我建议您运行 npm uninstall @angular/material 并使用 angular cli 使用 ng add @angular/material 重新安装它。

Answer 3

原来答案很简单。我只需要更新我的几个依赖项。希望这个答案对以后忘记做同样事情的人有所帮助。