页面加载时不可见的 Angular Material Design 输入元素

问题描述

我正在练习 Anuglar Material Design 组件的使用。我已经完成了使用 'ng add @angular/material' 添加 Angular Material 的常规步骤，并选择了其中一个主题并确定了其他默认值。

一切正常，只是表单输入在任何浏览器中都不可见。只有在直观地点击屏幕，猜测输入可能出现的位置后，它们才会变得可见。当我专注于输入时，输入字段消失

//app module ts
import { NgModule } from '@angular/core';
import { browserModule } from '@angular/platform-browser';
import {MatInputModule} from '@angular/material/input'
import { AppComponent } from './app.component';
import { browserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    browserModule,browserAnimationsModule,MatInputModule
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

//app component ts
import { Component,NgModule } from '@angular/core';



@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],})


export class AppComponent {
  title = 'ang-mat-design';
}

<!--no code added -->

<mat-form-field appearance = "fill">
    <input matInput placeholder = "Input">
    <mat-hint>Sample Hint</mat-hint>
 </mat-form-field>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）