Angular4 재질 입력이 제대로 표시되지 않습니다.

Question

저는 각도 4 프로젝트에 재질을 넣으려고합니다. 여기에서 예제를 사용하여 예제를 복사/붙여 넣습니다. 프로그래밍 방식 부분은 고객 이름을 입력 할 때 예상대로 작동하며 아래 표는 완벽하게 올바르게 표시됩니다. 문제는 mat-form-field 내의 matInput이 올바르게 표시되지 않는다는 것입니다. 입력 할 때 입력 된 텍스트는 자리 표시자를 떠 다니는 대신 자리 표시자를 오버레이합니다. 여기에 내 코드와 문제의 스크린 샷이 있습니다.

콘솔에 아무런 오류가 표시되지 않고 모든 것이 제대로 작동하는 것처럼 보입니다. 입력 필드에 문제가 있습니다. 여기

여기

 <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'}, 
]; 

입니다 .HTML 내 구성 요소 코드 내 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 내부 (전에 havent).