Question

我有一个显示员工列表的表组件。我有一个带有“隐藏表”文本的按钮，单击该按钮时，我希望表格隐藏，按钮文本更改为“显示表格”。好吧，我可以做到，但我有两个问题：

1）首次单击“隐藏表”按钮，需要两次单击才能启动操作。但是第一次点击后续点击就可以了。

2）初次点击后，我的素材按钮似乎不再是素材按钮。悬停时不会再显示材质平面按钮。

https://employee-table-app.herokuapp.com

employee.table.component.html

<div id="matTableDiv">
  <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 (click)="toggle();" id="table-button" mat-button color="primary">Hide Table</button>
</div>

雇员-table.component.ts

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {MatSort, MatSortable, MatTableDataSource} from '@angular/material';
import {EmployeeService} from '../employee.service';

@Component({
  selector: 'app-employee-table',
  templateUrl: './employee-table.component.html',
  styleUrls: ['./employee-table.component.css']
})
export class EmployeeTableComponent implements OnInit {
  @ViewChild(MatSort) sort: MatSort;
  dataSource;
  displayedColumns = ['photo', 'name', 'position'];

  constructor() {}
  ngOnInit() {   
    this.dataSource = new MatTableDataSource([
            {
              "id": 1,
              "name": "Leanne Grahamz",
              "username": "Bret",
              "position": "Software Developer"
            },
            {
              "id": 2,
              "name": "Ervin Howell",
              "username": "Antonette",
              "position": "Graphic Designer"
            },
            {
              "id": 3,
              "name": "Clementine Bauch",
              "username": "Samantha",
              "position": "Front End Developer"
            },
            {
              "id": 4,
              "name": "Patricia Lebsack",
              "username": "Karianne",
              "position": "Full Stack Developer"
            },
            {
              "id": 5,
              "name": "Chelsey Dietrich",
              "username": "Kamren",
              "position": "Database Administrator" 
            }
    ]); //End data object
  }//End ng onInit

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }

  toggle() {
    console.log("The hide table button was clicked.");

    var button = document.querySelector('#table-button');

    var table  = document.querySelector('.mat-table');

          if (table.style.display == "block") {
              table.style.display = "none";
              button.innerHTML = "Show Table";
          } else {
              table.style.display = "block";
              button.innerHTML = "Hide Table";
          }
  }
}//End class EmployeeTableComponent

Answer 1

在第一次单击时，表显示属性不是“阻止”（它是“表”，表元素的default display value），因此它转到else块。尝试通过以下方式反转逻辑以检查表是否可见：

if (table.style.display != "none") {
  table.style.display = "none";
  button.innerHTML = "Show Table";
} else {
  table.style.display = "table";
  button.innerHTML = "Hide Table";
}

按钮需要两次点击才能调用操作

1 个答案: