Question

我只是尝试使用材质设计平面按钮样式。我相信我使用的是正确的指令，但按钮仍无法正确显示。可在此处查看该按钮：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 { }

Answer 1

您应该使用mat代替md：

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

如果您使用主题：

，还要添加color="primary"（或其他值）

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

材料设计按钮不显示

1 个答案: