javascript - 在移动模式下隐藏 Angular Material 中的一些列

Question

我有这张 table 使用棱 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>

现在我怎样才能隐藏一些不需要的列？？？？

/******************************/****************** *************/***************************/********* ***************/***************************//******************************/********************* **********/******************

Answer 1

您可以根据用户代理为 displayedColumns 设置不同的值。像这样的东西:

ngOnInit() {
  if (isMobileBrowser) this.displayedColumns = ['mobile', 'column', 'set'];
  else this.displayedColumns = ['desktop', 'column', 'big', 'set'];

您可以找到如何检查移动浏览器的简单功能in this question .