我有这张桌子用角材:
<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'];
您可以找到简单的功能如何检查移动浏览器in this question。
关于javascript - 在移动模式下在Angular Material中隐藏一些列,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/58413557/