javascript - 在移动模式下隐藏 Angular Material 中的一些列
问题描述
我有这张使用有角材料的桌子:
<div class="table-container">
<table mat-table [dataSource]="dataSource" class="child">
<mat-divider></mat-divider>
<!-- title column -->
<ng-container matColumnDef="title" >
<th mat-header-cell *matHeaderCellDef> {{ 'GENERAL.TITLE' | translate }} </th>
<td mat-cell *matCellDef="let element"> {{ (element.title | slice:0:20 )+ '...' }} </td>
</ng-container>
<ng-container matColumnDef="writerFullName">
<th mat-header-cell *matHeaderCellDef> {{ 'POST.WRITER_ID' | translate }} </th>
<td mat-cell *matCellDef="let element"> {{element.writerFullName}} </td>
</ng-container>
<ng-container matColumnDef="paytype">
<th mat-header-cell *matHeaderCellDef> {{ 'POST.PAY_TYPE' | translate }} </th>
<td mat-cell *matCellDef="let element"> {{'ENUM.PAY_TYPE.'+element.payType | translate }} </td>
</ng-container>
<ng-container matColumnDef="likeCount">
<th mat-header-cell *matHeaderCellDef> {{ 'POST.LIKE_COUNT' | translate }} </th>
<td mat-cell *matCellDef="let element"> {{element.likeCount | translate }} </td>
</ng-container>
<ng-container matColumnDef="createdOnUtc">
<th mat-header-cell *matHeaderCellDef> {{ 'POST.CREATE_DATE' | translate }} </th>
<td mat-cell *matCellDef="let element">
<span *ngIf="lang=='fa'">{{ element.createdOnUtc | jalali }}</span>
<span *ngIf="lang!='fa'"> {{element.createdOnUtc | date: 'dd/MM/yyyy hh:mm'}} </span>
</td>
</ng-container>
<ng-container matColumnDef="thumbnail">
<th mat-header-cell *matHeaderCellDef> {{ 'GENERAL.PHOTO' | translate }} </th>
<td mat-cell *matCellDef="let element">
<img class="table-user-pic" [src]="appConfig.imagePath + element.thumbnail" id="photo"
alt="user avatar" width="50">
</td>
</ng-container>
<!-- cublished column -->
<ng-container matColumnDef="published">
<th mat-header-cell *matHeaderCellDef> {{ 'GIFT.PUBLISHED' | translate }} </th>
<td mat-cell *matCellDef="let element">
<span *ngIf="element.published">
<i class="fa fa-check-circle ic-green"></i>
</span>
<span class="" *ngIf="!element.published">
<i class="fa fa-ban ic-red"></i>
</span>
</td>
</ng-container>
<!-- actions -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>
{{ 'GENERAL.ACTIONS' | translate }}
</th>
<td mat-cell *matCellDef="let row; let i=index;">
<a mat-icon-button [matTooltip]="'TOOLTIP.EDIT' | translate" color="primary" uaccess
[permission]="':Post:Put'" [routerLink]="['/post/',row.id,'edit']">
<mat-icon aria-label="Edit">edit</mat-icon>
</a>
<a mat-icon-button (click)="showDetail(row)" [matTooltip]="'TOOLTIP.DETAIL' | translate">
<i class="far fa-eye" ></i>
</a>
<a mat-icon-button [matTooltip]="'TOOLTIP.LIKE' | translate">
<i class="far fa-thumbs-up" (click)="goRouteLikes(row.id)"></i>
</a>
<a mat-icon-button [matTooltip]="'TOOLTIP.COMMENTS' | translate">
<i class="far fa-comments" [routerLink]="['/post/comment/',row.id,'list']"></i>
</a>
<button mat-icon-button [matTooltip]="'TOOLTIP.DELETE' | translate" color="accent" uaccess
[permission]="':Post:Delete'" (click)="delete(row.id)">
<mat-icon aria-label="Delete">delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-progress-bar *ngIf="dataSource.loading$ | async" mode="indeterminate"></mat-progress-bar>
<mat-paginator [length]="dataSource.length$ | async" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
showFirstLastButtons></mat-paginator>
</div>
现在我怎样才能隐藏一些不需要它们的列????
/*******************************/************************ ************/**************************/************ ************/******************************/ /************ *******************/******************************/ ******************
解决方案
您可以displayedColumns
根据用户代理设置不同的值。就像是:
ngOnInit() {
if (isMobileBrowser) this.displayedColumns = ['mobile', 'column', 'set'];
else this.displayedColumns = ['desktop', 'column', 'big', 'set'];
您可以在这个问题中找到如何检查移动浏览器的简单功能。
推荐阅读
- node.js - 如何在服务器上的 express 和 node 中创建文件,然后将其下载到我的客户端。我正在为我的前端和后端使用 NextJS
- python - 如何创建更具活力的 Scrapy Spider?
- javascript - 在循环中声明的 React js 函数包含对“允许”变量的不安全引用
- git - 有没有办法对存储库中的各个组件进行版本/标记?
- angular - 直接从 Angular 连接到 Firebase 数据库是否安全?
- swift - 如何为 KCFloatingActionButton 定义 touchUpInside 动作?
- c - 用 fork 创建 num 个进程,然后删除一些我不会使用的进程
- python - 有一个错误需要解密一个整数
- javascript - 使用 Reactjs 的点表示法与括号表示法
- r - 查找值为零的行并在其前后添加行数