在 Angular 8 中单击按钮，在 html 表中隐藏和显示多列

Question

我必须切换显示和隐藏 html 表中的多个列。目前我可以显示和隐藏 column2。但是我想通过单击隐藏和显示多列，例如第 3 列、第 4 列和第 6 列，并在显示和隐藏之间切换按钮名称。或者有什么简单的方法可以在角度 8 中处理这个问题？

下面是我的桌子

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">&nbsp;
            </td>
          </tr>
        </table>

css代码

#foo.hide2 tr > *:nth-child(2) {
    display: none;
}

Answer 1

在 Angular 中找到了一个使用布尔变量和 scss 类打开和关闭它的解决方案，如下所示：

.html 文件

 <button class="mr-2 mb-1" [class.rs-inactive]="!showPlatformDetail" [class.rs-active]="showPlatformDetail" (click)="showPlatformDetail=!showPlatformDetail">&nbsp;{{showPlatformDetail ? 'Show Detail' : 'Hide Detail'}}&nbsp;</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">&nbsp;
            </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;