隐藏列Mat-Table Angular

Hide column Mat-Table Angular

我正在使用垫子桌子，我需要使其具有响应性，当用户通过手机访问时，它的七个列只能显示三个
有人可以指导我吗？

我尝试使用fxHide，但没有成功。

1
2
3
4
5
6
7
8
9
10
11
12
13

.button-raised {
width: 60px;
height: 30px;
font-size: 12px;
min-width: 0px;
line-height: 0px;
padding: 0 0px;
}
.rdesp-status mat-icon {margin: 4px;}
.mat-table {
overflow: auto;
max-height: 500px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<mat-table [dataSource]="dataSource" [@animateStagger]="{value:'50'}">

<ng-container class="internalId" matColumnDef="internalId">
<mat-header-cell *matHeaderCellDef fxHide fxShow.gt-sm >No RDESP</mat-header-cell>
<mat-cell *matCellDef="let element" fxHide fxShow.gt-sm >
{{element.number}}

</mat-cell>
</ng-container>

<ng-container class="alias" matColumnDef="alias">
<mat-header-cell *matHeaderCellDef>Apelido</mat-header-cell>
<mat-cell *matCellDef="let element">
{{element.alias}}

</mat-cell>
</ng-container>

<ng-container class="containerName" matColumnDef="name">
<mat-header-cell *matHeaderCellDef>Nome</mat-header-cell>
<mat-cell *matCellDef="let element">
Nome
{{element.name}}

</mat-cell>
</ng-container>

<ng-container matColumnDef="job">
<mat-header-cell *matHeaderCellDef>Job</mat-header-cell>
<mat-cell *matCellDef="let element">
Job
{{element.job}}

</mat-cell>

更新资料

如以下注释中所指出的那样，自7.0.0版起，Flex-layout已更改，并且已弃用ObservableMedia并将其替换为MediaObserver，此处有详细信息。

这是我最初为新语法发布的代码所需的更改：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import { MediaObserver, MediaChange } from '@angular/flex-layout';

...

export class MyComponent implements OnInit, OnDestroy {

displayedColumns: string[];
dataSource = new MatTableDataSource</* Type of Data */>();
currentScreenWidth: string = '';
flexMediaWatcher: Subscription;
// ... other variables

constructor(private mediaObserver: MediaObserver) {
this.flexMediaWatcher = mediaObserver.media$.subscribe((change: MediaChange) => {
if (change.mqAlias !== this.currentScreenWidth) {
this.currentScreenWidth = change.mqAlias;
this.setupTable();
}
}); // Be sure to unsubscribe from this in onDestroy()!
};

setupTable() {
this.displayedColumns = ['internalId', 'alias', 'name', 'job'];
if (this.currentScreenWidth === 'xs') { // only display internalId on larger screens
this.displayedColumns.shift(); // remove 'internalId'
}
};
}

原始答案：

好像您的问题中缺少一些数据。模板中应该有定义定义的行： and 标签。在mat-header-row标签内，要显示的列是* matHeaderRowDef的一部分。例如：

1 2	<mat-header-row matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row matRowDef="let row; columns: displayedColumns;"></mat-row>

此变量(在这种情况下为displayedColumns)控制实际显示的列。您正在使用fxHide，因此可以在组件中导入ObservableMedia并将其注入，然后在屏幕更改大小时使用它发出的observableMedia来修改显示的列。详细信息在这里。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import { ObservableMedia, MediaChange } from '@angular/flex-layout';

...

export class MyComponent implements OnInit, OnDestroy {

displayedColumns: string[];
dataSource = new MatTableDataSource</* Type of Data */>();
currentScreenWidth: string = '';
flexMediaWatcher: Subscription;
// ... other variables

constructor(private media: ObservableMedia) {
this.flexMediaWatcher = media.subscribe((change: MediaChange) => {
if (change.mqAlias !== this.currentScreenWidth) {
this.currentScreenWidth = change.mqAlias;
this.setupTable();
}
}); // Be sure to unsubscribe from this in onDestroy()!
};

setupTable() {
this.displayedColumns = ['internalId', 'alias', 'name', 'job'];
if (this.currentScreenWidth === 'xs') { // only display internalId on larger screens
this.displayedColumns.shift(); // remove 'internalId'
}
};
}

现在，例如，如果用户将手机切换到横向模式，您的桌子就会做出响应。