Angular mat-form-field/mat-label 问题

Question

我开始学习 Angular 材料，但我在从他们的站点添加示例时遇到了问题。

我在 html 文件中添加了：

        <mat-form-field class="example-form-field">
          <mat-label>Clearable input</mat-label>
          <input matInput type="text" [(ngModel)]="value">
          <button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
            <mat-icon>close</mat-icon>
          </button>
        </mat-form-field>

而且我几乎没有错误：'mat-form-field' 不是已知元素：

1. 如果“mat-form-field”是一个 Angular 组件，则验证它是该模块的一部分。
2. 如果“mat-form-field”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制

我的 app.module.ts 文件：

import {MatInputModule} from '@angular/material/input';
import {Component} from '@angular/core';
import { NgModule} from '@angular/core';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { BrowserModule } from '@angular/platform-browser';
import { MatRippleModule } from '@angular/material/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon'
import {MatButtonModule} from '@angular/material/button';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';

@NgModule ({

  schemas: [CUSTOM_ELEMENTS_SCHEMA],

  imports: [
    MatSlideToggleModule,
    BrowserModule,
    FormsModule,
    MatFormFieldModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    MatRippleModule
  ]
})
class AppModule {}
@Component({
  selector: 'input-clearable-example',
  templateUrl: './okno_testowe.html',
  styleUrls: ['./log.css'],
})
export class InputClearableExample {
  value = 'Clear me';
}

和 css：

.example-form-field {
    width: 200px;
  }

这里可能是什么问题？ 我认为我犯了一些简单的错误，因为我才刚刚迈出这些技术的第一步

Answer 1

• 您需要引导 InputClearableExample 组件，这将是呈现应用程序初始内容的组件
• 在声明数组中添加 InputClearableExample 组件
• 模式：[CUSTOM_ELEMENTS_SCHEMA]，不是必需的
• 另外添加BrowserAnimationsModule，Angular素材需要这个模块

@NgModule ({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MatFormFieldModule,
    MatButtonModule,
    MatIconModule,
    MatInputModule,
    MatRippleModule
  ],
  declarations: [InputClearableExample],
  bootstrap: [InputClearableExample],
})
export class AppModule {}