Question

我正在尝试将Material放在一个angular4项目中，我用表格复制/粘贴了exampel。当我输入一个客户名称（它按照它应该过滤）时，程序部分按预期工作，下表显示非常好。问题是mat-form-field中的matInput没有正确显示。当您键入内容时，键入的文本将覆盖占位符，而不是占位符将浮动。这是我的问题的代码和截图。

控制台显示没有错误或任何内容，一切似乎都运行正常，这是输入字段的css问题，我正面临着什么。

这是我的组件代码.html

        <app-topmenu></app-topmenu>
<br><br>
<div class="container">
    <div>
        <div class="col-xs-12">
            <div class="example-container mat-elevation-z8">
              <div class="example-header">
                <mat-form-field>
                  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Customer Name">
                </mat-form-field>
              </div>


            </div>

        </div>
    </div>
</div>

这是我的组件.ts代码

import { Component, OnInit } from '@angular/core';
import { MainconfService } from '../services/mainconf.service';
import {MatTableDataSource} from '@angular/material';
import {MatInputModule} from '@angular/material/input';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

    displayedColumns = ['position', 'name', 'weight', 'symbol'];
     dataSource = new MatTableDataSource(ELEMENT_DATA);

     applyFilter(filterValue: string) {
       filterValue = filterValue.trim(); // Remove whitespace
       filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
       this.dataSource.filter = filterValue;
     }

  constructor(public mainconf: MainconfService ) {

   }




  ngOnInit() {
       this.mainconf.authenticate();
  }






}

export interface Element {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: Element[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
];

这是我的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule }   from '@angular/forms';
import { NgForm } from '@angular/forms';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { LogoffComponent } from './logoff/logoff.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
// import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { ApiService } from './api.service';
import { MainconfService } from './services/mainconf.service';
import { TopmenuComponent } from './topmenu/topmenu.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule, MatCheckboxModule, MatCardModule, MatTableModule, MatFormFieldModule, MatInputModule  } from '@angular/material';

const appRoutes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'logoff', component: LogoffComponent },
  { path: '**', component: LoginComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    LogoffComponent,
    TopmenuComponent
  ],
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: false } // <-- debugging purposes only
  ),

  // NgbModule.forRoot(),
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule, MatButtonModule, MatCheckboxModule, MatCardModule, MatTableModule, MatFormFieldModule , MatInputModule

  ],
  providers: [ApiService, MainconfService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

我发现了这个问题，我将陈述以防有人处于类似情况。

我需要放置@import“~@ angular/material/prebuilt-themes/indigo-pink.css”;在styles.css里面（我之前没有）。

Angular4材质输入无法正常显示

1 个答案: