如何使用Ionic 6/Angular中的切换按钮从图形视图和tableView切换？

Question

我有两个要显示数据的组件。表视图和图形视图。两个组件都有相同的数据。我使用一个切换开关按钮在这些视图之间切换。这是我的代码：

<ion-header>
  <ion-toolbar class="toolbar-color">
    <ion-title>Views</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <ion-grid>
    <ion-row>
      <ion-col>
        <div class="ion-text-start">
          <ion-item>
            <ion-label>Switch to table view</ion-label>
            <ion-toggle (click)="showTable()"></ion-toggle>
          </ion-item>
        </div>
      </ion-col
    </ion-row>
    <ion-row>
      <ion-col>
        <app-tableview hidden="true" id="tableview"></app-tableview>
        <canvas height="200" #lineCanvas></canvas>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

默认视图是通过Chart.js的GraphView。两个组件都可以正常工作。这是我要隐藏和显示的代码：

showTable() {
    if (this.tableHidden === true) {

      this.tableHidden = false;
      document.getElementById("tableview").hidden = false;
      

    } else if (this.tableHidden === false) {

      this.tableHidden = true;    
      document.getElementById("tableview").hidden = false; 
   
    }

  }

当我单击“切换开关”时，它不会隐藏图形视图，而是彼此显示表视图。我尝试了这篇文章的可见性，但行不通。

javascript hide/show element

我如何在组件之间切换并仅显示视图？

jsfiddle链接： https://jsfiddle.net/f8a3wwgxb/

Answer 1

一个基于 @alex87的评论的示例：

<ng-container *ngIf="!tableHidden">
    <app-tableview id="tableview"></app-tableview>
</ng-container>
<ng-container *ngIf="tableHidden">
    <canvas height="200" #lineCanvas></canvas>
</ng-container>

不必是ng-container，但是仅角度的标签不会向DOM添加任何内容。您可以随时使用A或其他任何事情来做同样的事情...
您也可以使用*ngifelse ...将其整合起来。
https://angular.io/api/api/common/common/ngif

注意：我倾向于过于舷外在我的标签包装中，因此ng -container s，但是*ngif通常在几乎所有标签上都可用，hidden> hidden - 用法。

编辑：修复了隐藏的变量名称 - 我很懒惰，没有回头找到您所说的。

编辑＃2：您可以整理并最小化隐藏变量的设置，而不是需要if/else。

// This toggles between true/false
this.tableHidden = !this.tableHidden;
document.getElementById("tableview").hidden = !this.tableHidden; 

减少到只有两条线。