在 Angular 8 中单击按钮隐藏和显示 html table 中的多列
Hide and Show Multiple columns in html table with button click in Angular8
我必须在 html table 中切换显示和隐藏多个列。目前我可以显示和隐藏 column2。但是我想通过单击隐藏和显示多列,比如第 3 列、第 4 列和第 6 列,并在显示和隐藏之间切换按钮名称。或者在 angular 8 中有什么简单的方法可以处理这个问题吗?
下面是我的table
html
<button onclick='document.getElementById("foo").classList.toggle("hide2")'>Show/hide</button>
<table id="foo" class="table table-sm fs-13px mt-2 mb-5">
<tr>
<th class="text-danger fw7 pl-0" colspan="6">
TABLE 1
</th>
</tr>
<tr>
<th class="text-nowrap pr-3 pl-0 sticky-header">Year
</th>
<th class="text-nowrap pr-3 sticky-header">Platform
</th>
<th class="text-nowrap pr-3 sticky-header">Name
</th>
<th class="text-nowrap pr-3 sticky-header">Variants
</th>
<th class="text-nowrap pr-3 sticky-header">Program
</th>
<th class="w-100 sticky-header"></th>
</tr>
<tr *ngFor="let u of apiData.unassigned">
<td class="text-nowrap pr-3 pl-0">
{{ u.year }}
</td>
<td class="text-nowrap text-danger pr-3">
Not Assigned
</td>
<td class="text-nowrap pr-3">
{{ u.modelName }}
</td>
<td class="text-nowrap pr-3">
{{ u.unassignedVariantCount }}
</td>
<td class="text-nowrap pr-3">
{{ u.programCode }}
</td>
<td></td>
</tr>
<tr>
<td colspan="6">
</td>
</tr>
</table>
css代码
#foo.hide2 tr > *:nth-child(2) {
display: none;
}
在 Angular 中找到了一个使用布尔变量和 scss class 将其打开和关闭的解决方案,如下所示:
.Html 文件
<button class="mr-2 mb-1" [class.rs-inactive]="!showPlatformDetail" [class.rs-active]="showPlatformDetail" (click)="showPlatformDetail=!showPlatformDetail"> {{showPlatformDetail ? 'Show Detail' : 'Hide Detail'}} </button>
<table id="platforms" class="table table-sm fs-13px mt-2 mb-5" [class.platform-detail]="showPlatformDetail">
<tr>
<th class="text-danger fw7 pl-0" colspan="6">
TABLE 1
</th>
</tr>
<tr>
<th class="text-nowrap pr-3 pl-0 sticky-header">Year
</th>
<th class="text-nowrap pr-3 sticky-header">Platform
</th>
<th class="text-nowrap pr-3 sticky-header">Name
</th>
<th class="text-nowrap pr-3 sticky-header">Variants
</th>
<th class="text-nowrap pr-3 sticky-header">Program
</th>
<th class="w-100 sticky-header"></th>
</tr>
<tr *ngFor="let u of apiData.unassigned">
<td class="text-nowrap pr-3 pl-0">
{{ u.year }}
</td>
<td class="text-nowrap text-danger pr-3">
Not Assigned
</td>
<td class="text-nowrap pr-3">
{{ u.modelName }}
</td>
<td class="text-nowrap pr-3">
{{ u.unassignedVariantCount }}
</td>
<td class="text-nowrap pr-3">
{{ u.programCode }}
</td>
<td></td>
</tr>
<tr>
<td colspan="6">
</td>
</tr>
</table>
.scss 文件
.platform-detail > tr > *:nth-child(7),
.platform-detail > tr > *:nth-child(8),
.platform-detail > tr > *:nth-child(10),
.platform-detail > tr > *:nth-child(11),
.platform-detail > tr > *:nth-child(13),
.platform-detail > tr > *:nth-child(15) {
display: none;
}
.ts 文件
showPlatformDetail = true;
我必须在 html table 中切换显示和隐藏多个列。目前我可以显示和隐藏 column2。但是我想通过单击隐藏和显示多列,比如第 3 列、第 4 列和第 6 列,并在显示和隐藏之间切换按钮名称。或者在 angular 8 中有什么简单的方法可以处理这个问题吗?
下面是我的table
html
<button onclick='document.getElementById("foo").classList.toggle("hide2")'>Show/hide</button>
<table id="foo" class="table table-sm fs-13px mt-2 mb-5">
<tr>
<th class="text-danger fw7 pl-0" colspan="6">
TABLE 1
</th>
</tr>
<tr>
<th class="text-nowrap pr-3 pl-0 sticky-header">Year
</th>
<th class="text-nowrap pr-3 sticky-header">Platform
</th>
<th class="text-nowrap pr-3 sticky-header">Name
</th>
<th class="text-nowrap pr-3 sticky-header">Variants
</th>
<th class="text-nowrap pr-3 sticky-header">Program
</th>
<th class="w-100 sticky-header"></th>
</tr>
<tr *ngFor="let u of apiData.unassigned">
<td class="text-nowrap pr-3 pl-0">
{{ u.year }}
</td>
<td class="text-nowrap text-danger pr-3">
Not Assigned
</td>
<td class="text-nowrap pr-3">
{{ u.modelName }}
</td>
<td class="text-nowrap pr-3">
{{ u.unassignedVariantCount }}
</td>
<td class="text-nowrap pr-3">
{{ u.programCode }}
</td>
<td></td>
</tr>
<tr>
<td colspan="6">
</td>
</tr>
</table>
css代码
#foo.hide2 tr > *:nth-child(2) {
display: none;
}
在 Angular 中找到了一个使用布尔变量和 scss class 将其打开和关闭的解决方案,如下所示:
.Html 文件
<button class="mr-2 mb-1" [class.rs-inactive]="!showPlatformDetail" [class.rs-active]="showPlatformDetail" (click)="showPlatformDetail=!showPlatformDetail"> {{showPlatformDetail ? 'Show Detail' : 'Hide Detail'}} </button>
<table id="platforms" class="table table-sm fs-13px mt-2 mb-5" [class.platform-detail]="showPlatformDetail">
<tr>
<th class="text-danger fw7 pl-0" colspan="6">
TABLE 1
</th>
</tr>
<tr>
<th class="text-nowrap pr-3 pl-0 sticky-header">Year
</th>
<th class="text-nowrap pr-3 sticky-header">Platform
</th>
<th class="text-nowrap pr-3 sticky-header">Name
</th>
<th class="text-nowrap pr-3 sticky-header">Variants
</th>
<th class="text-nowrap pr-3 sticky-header">Program
</th>
<th class="w-100 sticky-header"></th>
</tr>
<tr *ngFor="let u of apiData.unassigned">
<td class="text-nowrap pr-3 pl-0">
{{ u.year }}
</td>
<td class="text-nowrap text-danger pr-3">
Not Assigned
</td>
<td class="text-nowrap pr-3">
{{ u.modelName }}
</td>
<td class="text-nowrap pr-3">
{{ u.unassignedVariantCount }}
</td>
<td class="text-nowrap pr-3">
{{ u.programCode }}
</td>
<td></td>
</tr>
<tr>
<td colspan="6">
</td>
</tr>
</table>
.scss 文件
.platform-detail > tr > *:nth-child(7),
.platform-detail > tr > *:nth-child(8),
.platform-detail > tr > *:nth-child(10),
.platform-detail > tr > *:nth-child(11),
.platform-detail > tr > *:nth-child(13),
.platform-detail > tr > *:nth-child(15) {
display: none;
}
.ts 文件
showPlatformDetail = true;