在响应式设备中隐藏 mat-table 特定列

Question

我正在尝试构建一个响应所有设备的 web 应用程序。我正在使用棱角材料进行设计。在这个特定的组件中，我使用 mat-table 并且我想隐藏 android 设备的票证列。我试过 fxHide fxShow.gt-sm 但它没有用。谁能指导我？

<mat-card>
  <mat-card-content>
    <mat-table [dataSource]="dataSource">
      <!-- User name Definition -->
      <ng-container matColumnDef="ticketnumber">
        <mat-header-cell *matHeaderCellDef> Ticket No. </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.ticketnumber}} </mat-cell>
      </ng-container>
    
      <!-- player Definition -->
      <ng-container matColumnDef="player">
        <mat-header-cell *matHeaderCellDef> Player </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.player}} </mat-cell>
      </ng-container>
    
      <!-- booked Definition -->
      <ng-container matColumnDef="booked">
        <mat-header-cell *matHeaderCellDef> Booked By </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.booked}} </mat-cell>
      </ng-container>
      
 

// I want to hide this particular ticket column below on mobile devices. I have tried using angular flex layout <div fxHide fxShow.gt-sm> but it didn't work. I don't know how to use mediaObserver properly. Can anyone guide me? 
  

<ng-container matColumnDef="tickets">
        <mat-header-cell *matHeaderCellDef> Ticket </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.tickets}} </mat-cell>
      </ng-container>
    
      <!-- Header and Row Declarations -->
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
    </mat-table>
  </mat-card-content>
</mat-card>

这是我的 ts 文件。在学习mediaObserver的过程中，我不知道如何正确使用它。

import {Component, OnDestroy, OnInit} from '@angular/core';
import { MediaChange, MediaObserver } from '@angular/flex-layout';
import { Subscription } from 'rxjs';



@Component({
  selector: 'ancode-tickets',
  templateUrl: './tickets.component.html',
  styleUrls: ['./tickets.component.scss']
})
export class TicketsComponent implements OnInit, OnDestroy{
  
  displayedColumns : string[] = ['ticketnumber', 'player', 'booked','tickets'];
  currentScreenWidth: string = '';
  flexMediaWatcher: Subscription;


  dataSource = [{
    ticketnumber : "1",
    player: 25,
    booked: "Admin",
    tickets: [1,2,3,4]
  },
  {
    ticketnumber : "2",
    player: 29,
    booked: "Admin",
    tickets : [5,6,7,8]
  }
]

constructor(private media$: MediaObserver) {
   
};


  ngOnInit(): void {
    this.flexMediaWatcher = this.media$.subscribe((change: MediaChange) => {
      if (change.mqAlias !== this.currentScreenWidth) {
          this.currentScreenWidth = change.mqAlias;
        ;
      }
  });
  }
  ngOnDestroy(): void {
    
  }
}

Answer 1

您可以使用*ngIf。

为此，您必须将 *ngIf 放在 th/td 内的元素上

Answer 2

仅当用户是“超级管理员”时才希望显示组织详细信息

<ng-container matColumnDef="organization">       
  <th mat-header-cell *matHeaderCellDef mat-sort-header>         
    <span *ngIf="currentUser?.organization.role == 'superadmin'">
      Organization
    </span>       
  </th>       
  <td mat-cell *matCellDef="let element">            
    <span *ngIf="currentUser?.organization.role == 'superadmin'">
      {{element.organization.name ? element.organization.name : '-'}}
    </span>       
  </td>     
</ng-container>