Tombol Desain Material Tidak Ditampilkan

Saya hanya mencoba menggunakan gaya tombol datar desain material. Saya yakin saya menggunakan arahan yang benar, tetapi tombolnya masih tidak ditampilkan dengan benar. Tombolnya dapat dilihat di sini: https://employee-table-app.herokuapp.com/

Terima kasih, CMazz

tabel-karyawan.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>

aplikasi.modul.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 sumber


Jawaban (1)


Anda harus menggunakan mat daripada md:

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

Tambahkan juga color="primary" (atau nilai lainnya) jika Anda menggunakan tema:

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

person Julius    schedule 29.04.2018