javascript - 如果材料角度数据表中的变量为真,则隐藏特定列
问题描述
早上好,我有以下问题,我有一个数据表,我通过使用 api rest 来获取其中的数据,问题是我想根据变量的值隐藏同一个表的特定列,其中它的值将在身份验证中收集以进入应用程序,但我想知道有什么方法可以根据变量的条件隐藏数据表中的列。
我的代码
<div class="col-11 mx-auto">
<div class="search-div" >
<button class="btn btn-primary" (click)="onCreate()" [hidden]='permiso2'>Crear Equipo</button>
<!-- -->
<button class="btn btn-warning"(click)="onExport()">Descargar Datos</button>
<mat-form-field class="search-form-field">
<input matInput (keyup)="DoFilter($event.target.value)" placeholder="Filtrar">
</mat-form-field>
</div>
<!--Data Table-->
<div>
<table mat-table [dataSource]="dataSource" align="center" [hidden]="isLoading" >
<!-- Position Column -->
<ng-container matColumnDef="id_equipo">
<th mat-header-cell *matHeaderCellDef>ID Equipo</th>
<td mat-cell *matCellDef="let element">{{element.id_equipo}}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="nombre">
<th mat-header-cell *matHeaderCellDef>Nombre Equipo</th>
<td mat-cell *matCellDef="let element" >{{element.nombre}}</td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="vendedor">
<th mat-header-cell *matHeaderCellDef>Vendedor</th>
<td mat-cell *matCellDef="let element">{{element.vendedor}}</td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="ip_gestion">
<th mat-header-cell *matHeaderCellDef>IP Gestión</th>
<td mat-cell *matCellDef="let element">{{element.ip_gestion}}</td>
</ng-container>
<ng-container matColumnDef="tipo">
<th mat-header-cell *matHeaderCellDef>Tipo</th>
<td mat-cell *matCellDef="let element">{{element.tipo}} </td>
</ng-container>
<ng-container matColumnDef="localidad">
<th mat-header-cell *matHeaderCellDef>Localidad</th>
<td mat-cell *matCellDef="let element">{{element.localidad}}</td>
</ng-container>
<!-- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr> -->
<ng-container matColumnDef="categoria">
<th mat-header-cell *matHeaderCellDef>Categoria</th>
<td mat-cell *matCellDef="let element">{{element.categoria}}</td>
</ng-container>
<ng-container matColumnDef="com_snmp">
<th mat-header-cell *matHeaderCellDef matTooltip="Comunidad SNMP de Lectura" matTooltipPosition="above">Com. SNMP</th>
<td mat-cell *matCellDef="let element">{{element.com_snmp}}</td>
</ng-container>
<ng-container matColumnDef="ultima_actualizacion">
<th mat-header-cell *matHeaderCellDef>Ultima Actualización </th>
<td mat-cell *matCellDef="let element">{{element.ultima_actualizacion | date:'d/M/yyyy, h:mm a'}}</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>Acciones</th>
<td mat-cell *matCellDef="let element">
<fa-icon [icon]=icon_edit class="btn btn-success" (click)=onEdit(element) matTooltip="Editar" matTooltipPosition="left" [hidden]='permiso2'></fa-icon>
<!-- -->
<fa-icon [icon]=icon_delete class="btn btn-danger" (click)=onDelete(element) matTooltip="Eliminar" matTooltipPosition="right" [hidden]='!delete_permiso'></fa-icon>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5,10,20,50]" showFirstLastButtons [hidden]="isLoading"></mat-paginator>
</div>
<!--Spinner Para la Carga de Datos-->
<ng-container *ngIf="isLoading">
<mat-spinner class="spinner-container"></mat-spinner>
<br>
<p>Su data esta siendo cargada, por favor espere</p>
</ng-container>
</div>
<br>
我的等价物
displayedColumns: string[] = ['id_equipo', 'nombre', 'vendedor', 'ip_gestion','tipo','localidad','categoria','com_snmp','ultima_actualizacion','actions',]; // Arreglo con los nombres de las columnas a mostrar por el DataTable
dataSource:any;
RenderDataTable() {
this.isLoading=true;
this.PrtgService.getAllElements(this.table).subscribe(
(res) => {
this.dataSource = new MatTableDataSource();
this.dataSource.data = res.sort((a, b) => a.vendedor.localeCompare(b.vendedor));
this.dataSource.paginator = this.paginator; // Paginando el DataSource
this.isLoading=false;
},
ngOnInit() {
this.RenderDataTable()
}
解决方案
您可以displayedColumns
根据您的情况使用变量来显示隐藏列。删除您需要的列,displayedColumns
如下所示:
ngOnInit(){
if(yourCond == true){
displayedColumns: string[] = ['id_equipo', 'nombre', 'vendedor', 'ip_gestion','tipo','localidad','categoria','ultima_actualizacion','actions'];
}
}
推荐阅读
- php - php从没有api密钥的地址获取纬度
- ios - XLPagerTabStrip 不刷卡到下一个 vc
- c++ - 在 Linux Mint QT 上构建 C++ Allegro 5 失败
- python - Chatterbot - 没有名为“chatterbot.trainers”的模块 - python 3.x
- google-bigquery - 谷歌 BigQuery 机器学习
- python - 如何从张量流检查点文件中正确恢复网络训练?
- javascript - 在兄弟姐妹 React.js 之间传递索引
- wordpress - 将 docker-compose.yml 中的端口转发到主机上的旧公开端口
- javascript - JSON 与 Angular 和 node.js
- python - 如何将 numpy ndarray 转置到位?