Кнопка, требующая двух кликов для запуска действия

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

При первом щелчке свойство отображения таблицы не является «блоком» (это «таблица», значение отображения по умолчанию для элементов таблицы), поэтому оно переходит к блоку else. Попробуйте инвертировать логику, чтобы проверить, видима ли таблица с помощью:

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