Tengo dos componentes para mostrar datos. La vista de tabla y la vista de gráfico. Ambos componentes tienen los mismos datos. Utilizo un botón de cambio para alternar entre estas vistas. Este es mi código:
<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>La vista predeterminada es la vista gráfica a través de chart.js. Ambos componentes funcionan bien. Este es mi código para ocultar y mostrar:
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; } }Cuando hago clic en el interruptor de palanca, no oculta la vista de gráfico, pero muestra la vista de tabla entre sí. He probado la visibilidad de esta publicación pero no funciona.
JavaScript ocultar/mostrar elemento
¿Cómo puedo cambiar entre los componentes y mostrar solo la vista?
Enlace JSFiddle: https://jsfiddle.net/f8a3wgxb/
Un ejemplo basado en el comentario de @ alex87:
<ng-container *ngIf="showTableView"> <app-tableview id="tableview"></app-tableview> </ng-container> <ng-container *ngIf="!showTableView"> <canvas height="200" #lineCanvas></canvas> </ng-container> No tiene que ser un ng-container , pero esa etiqueta solo de Angular no agregará nada al DOM. Siempre puedes usar a o cualquier otra cosa para hacer exactamente lo mismo... También puedes mejorarlo usando *ngIfElse ... https://angular.io/api/common/NgIf