如何在Ionic 6/Angular中用切换按钮切换图形视图和表格视图？

0 人关注

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

<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>
      </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隐藏/显示元素
我怎样才能在组件和只显示视图之间进行切换？
JSFiddle link: https://jsfiddle.net/f8a3wgxb/


           
            
             与其直接操作dom，你为什么不使用
             
              *ngIf
             
             指令？


           
            
             你好，Alex，谢谢你的时间。我想你指的是类似
             
              *ngIf="!Showtable"
             
             的东西？我试过了，但我觉得我用错了。你有一个例子吗？


         
          javascript


         
          android


         
          html


         
          angular


         
          ionic-framework


          
           已采纳


          
           
            基于@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，但那个Angular专用的标签不会向DOM添加任何东西。你可以使用a或其他任何东西来做同样的事情...
你也可以通过使用*ngIfElse来整顿它...
https://angular.io/api/common/NgIf
注意：我倾向于对标签进行过度包装，因此有ng-container，但*ngIf通常在几乎所有的标签上都可用，正如hidden一样。- 根据你的用法。
编辑：修正了隐藏的变量名称--我太懒了，没有回头去找你到底叫什么。
编辑#2：你可以将隐藏变量的设置整齐化、最小化，而不需要if/else。