Question

我正在尝试在第一个有角度的应用程序中运行此示例： https://material.angular.io/components/input/examples 带清除按钮的输入字段。

我的template.html中包含以下代码：

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

我导入了以下模块：

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { FormsModule } from '@angular/forms';
    import { MatTabsModule } from '@angular/material/tabs';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { MatCheckboxModule } from '@angular/material';
    import { MatToolbarModule } from '@angular/material/toolbar';
    import { MatIconModule } from '@angular/material/icon';
    import { MatGridListModule } from '@angular/material/grid-list';
    import { MatSlideToggleModule} from '@angular/material/slide-toggle';
    import { MatInputModule } from '@angular/material/input';
    import { MatMomentDateModule } from '@angular/material-moment-adapter';
    import { MatDatepickerModule } from '@angular/material/datepicker';
    import { MatFormFieldModule } from '@angular/material/form-field';

imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    MatTabsModule,
    MatCheckboxModule,
    MatToolbarModule,
    MatIconModule,
    MatGridListModule,
    MatSlideToggleModule,
    MatInputModule,
    MatDatepickerModule,
    MatMomentDateModule

但是关闭图标看起来并不像它应该的样子： Angular Material Clear Input Button with wrong lay-out

我在做什么错？我使用的其他表单字段都可以正常工作。

Answer 1

我找到了答案：我需要添加import { MatButtonModule } from '@angular/material/button';才能使按钮正常工作。

角度材质：输入清除按钮图标布局失败

1 个答案: