javascript - 需要两次单击才能调用操作的按钮
问题描述
我有一个显示员工列表的表格组件。我有一个带有“隐藏表格”文本的按钮,单击该按钮时,我希望隐藏表格并将按钮的文本更改为“显示表格”。好吧,我可以做到,但我有两个问题:
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>
员工表.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
解决方案
在第一次单击时,表格显示属性不是“块”(它是“表格”,表格元素的默认显示值),所以它进入else
块。尝试反转您的逻辑以检查表是否可见:
if (table.style.display != "none") {
table.style.display = "none";
button.innerHTML = "Show Table";
} else {
table.style.display = "table";
button.innerHTML = "Hide Table";
}
推荐阅读
- python - 为什么我的 DataFrame 不能为 .values() 调用?
- bootstrap-4 - 如何解决引导程序中图标的点击问题
- arrays - C:了解后缀运算符的行为
- kotlin - 如何为 kotlin `when` 表达式定义自定义条件
- spring - Spring-Boot @Async:如何在运行时使用@Async 找出实际的方法名称注释?
- python - list(dict.items()) 是线程安全的吗?
- swift - 日期扩展 Swift 中的强引用
- tailwind-css - 顺风 grid_template_columns
- discord - (已关闭)Discord bot 欢迎消息和留言不起作用
- unity3d - 努力在Unity中将偏移图像纹理应用于立方体基元的所有侧面