ปุ่มการออกแบบวัสดุไม่แสดง

ฉันแค่พยายามใช้สไตล์ปุ่มแบนการออกแบบวัสดุ ฉันเชื่อว่าฉันใช้คำสั่งที่ถูกต้อง แต่ปุ่มยังคงแสดงไม่ถูกต้อง สามารถดูปุ่มได้ที่นี่: https://employee-table-app.herokuapp.com/

ขอบคุณ CMazz

พนักงาน table.component.html

<div>
  <mat-table [dataSource] = "dataSource" matSort>
    <ng-container matColumnDef="photo">
      <mat-header-cell *matHeaderCellDef>Profile</mat-header-cell>
      <mat-cell *matCellDef="let employee"><img width = "50" height = "50" src = "../assets/images/{{employee.username}}.jpg" >
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Employee Name</mat-header-cell>
      <mat-cell *matCellDef="let employee">{{employee.name}}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Job Title</mat-header-cell>
      <mat-cell *matCellDef="let employee">{{employee.position}}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns" color="primary"></mat-header-row>
    <mat-row *matRowDef="let row; columns:displayedColumns"></mat-row>
  </mat-table>
  <button md-button>Hide Table</button>
</div>

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HttpClientModule} from '@angular/common/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ButtonComponent} from './button/button.component';
import {ButtonToggleComponent} from './button-toggle/button-toggle.component';
import {MatButtonModule} from '@angular/material/button';
import {MatButtonToggleModule} from '@angular/material/button-toggle';
import {MatTableModule, MatSortModule} from '@angular/material';
import {AppComponent} from './app.component';
import {EmployeeTableComponent} from './employee-table/employee-table.component';
import {EmployeeService} from './employee.service';


@NgModule({
  declarations: [
    AppComponent,
    EmployeeTableComponent, 
    ButtonComponent,
    ButtonToggleComponent

  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatTableModule, 
    MatSortModule,
    MatButtonModule,
    MatButtonToggleModule
  ],
  providers: [EmployeeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

person Community    schedule 29.04.2018    source แหล่งที่มา


คำตอบ (1)


คุณควรใช้ mat แทน md:

<button mat-button>Hide Table</button>

เพิ่ม color="primary" (หรือค่าอื่น ๆ ) ด้วยหากคุณใช้ธีม:

<button mat-button color="primary">Hide Table</button>

person Julius    schedule 29.04.2018