标签: mat-table

我有一个由这种垂直结构组成的应用程序：导航栏、搜索部分和带有结果的表格。这些树元素中的每一个都占用了所需的空间，而无需使用固定大小。更多的搜索部分有隐藏的子部分，所以它的大小可以随着时间的推移而改变。

我想要做的是：我希望这三个部分独立调整它们的高度以占据所有可用空间。但是因为我可以在表格上有很多结果，所以最终需要一个垂直滚动条。所以我想看到的唯一滚动条是在表格的结果部分。

如果我设置

溢出：自动

在全局 CSS 上，如果表格有太多结果，我会看到一个全局滚动条。

如何强制表格使用屏幕上的剩余空间并在需要时显示滚动条？

当我们按代码对 mat 表进行排序时，mat-sort 图标不会显示。如何在单击按钮而不是单击 mat-h​​eader 时进行排序。

StackBlitzzzz 链接

我想在悬停时带框阴影。box-shadow除了最后一个，使用 CSS不能很好地处理底部边框。

不知何故，下排边框似乎挡住了阴影的显示，因此不可见。难道mat-elevation这里可以使用？尝试过，但无法使其工作。

HTML：

<table mat-table [dataSource]="dataSource" >

  <!--- Note that these columns can be defined in any order.
        The actual rendered columns are set as a property on the row definition" -->

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th …

我想对下面的代码进行一些更改......不幸的是它不起作用:(你能告诉我我需要添加什么到我的代码中吗？

// Standard style from Angular Material
.mat-toolbar-row, .mat-toolbar-single-row {
    display: flex;
    box-sizing: border-box;
    padding: 0 16px;
    width: 100%;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;
}

// My Code
/deep/ .mat-toolbar-row, .mat-toolbar-single-row {
padding: 0 5px !important;
}

我有两个 AG 网格显示数据。它们中的每一个在每一行的末尾都有两个图标，用于修改或取消数据行。它们都在垫子标签内。

<mat-tab-group>
    <mat-tab label="Adresses">
      <div class="col d-flex justify-content-end py-3"><button class="btn btn-major" *ngIf="modify" (click)="showCreateAdresseDialog()">CRÉER</button></div>
      <ag-grid-angular
        style="height: 600px"
        class="ag-theme-alpine"
        [rowData]="rowData"
        [gridOptions]="gridOptions"
        suppressCellSelection="true"
        [paginationAutoPageSize]="true"
        [pagination]="true"
        [frameworkComponents]="frameworkComponents"
        [overlayLoadingTemplate]="overlayLoadingTemplate"
        [overlayNoRowsTemplate]="overlayNoRowsTemplate"
        (gridReady)="onGridReady($event)">
      </ag-grid-angular>
    </mat-tab>

    <mat-tab label="Rôles">
      <div class="col d-flex justify-content-end py-3"><button class="btn btn-major" (click)="showCreateRoleDialog()" *ngIf="modify">CRÉER</button></div>
      <ag-grid-angular
        style="height: 600px"
        class="ag-theme-alpine"
        [rowData]="rolesRowData"
        [columnDefs]="columns"
        [gridOptions]="rolesGridOptions"
        suppressCellSelection="true"
        [paginationAutoPageSize]="true"
        [pagination]="true"
        [frameworkComponents]="frameworkComponents"
        [overlayLoadingTemplate]="overlayLoadingTemplate"
        [overlayNoRowsTemplate]="overlayNoRolesRowsTemplate"
        (gridReady)="onRolesGridReady($event)">
      </ag-grid-angular>
    </mat-tab>
  </mat-tab-group>

下面，您可能会看到我如何在 AG 网格中添加组件。

frameworkComponents = {
    modifierButtonRenderer: ActeurModifierAdresseButtonRendererComponent,
    // Other components
};

  gridOptions = {
context: {
  parentComponent: this
},
defaultColDef: { …

我在垫子桌子上有三列。

第一列是数字，第三列是日期，第二列是一个大字符串。

我希望第一列为15px，第三列为100px，中间列为其余宽度。百分比为5％，85％为10％。

如何在垫子桌子上做到这一点？

有没有办法在特定列上禁用行扩展。通常，如果您单击一行的任何部分，它就会展开。但是假设一列是评论部分，当用户单击输入字段时，您不希望该行展开。就像在这个例子中一样。单击位置列时如何防止行扩展：https : //stackblitz.com/angular/gqvrlgbeqkv?file=app%2Ftable-expandable-rows-example.ts

mat-sort无法处理mat-table来自另一个数据库的的一个列，其余的列则工作正常。唯一的区别是，我正在从另一服务获取该列的数据。

我试图解决它，ngAfterViewInit但无济于事。

ngAfterViewInit(){
  this.dataSource.sort = this.sort;
};

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Resource </th>
  <td mat-cell *matCellDef="let element"> {{element.creator.name}} </td>
  <td mat-footer-cell *matFooterCellDef> </td>
</ng-container>

displayedColumns: string[] = ['projectName', 'date', 'hours', 'description', 'name', 'location', 'Edit'];

@ViewChild(MatSort) sort: MatSort;

ngOnInit(){
  this.dataSource.sort = this.sort;
}

我尝试在 Mat-table 中打印我的数据。

我非常接近，但我无法完成我的前端。

我的数据是：

0: {Group: 1, Rules: Array(1), Title: "NAME"}
1: {Group: 2, Rules: Array(2), Title: "TERRITORY"}

And the array for Group 1 have rules like this (and so on for Group 2):
0: {Date: "1990-01-01", NewRules: 0, Rules: "Ligue Name", Id: 1}
1: {Date: "1990-01-01", NewRules: 1, Rules: "Other rules", Id: 2}

这是 .html 代码：

<mat-card-content>
  <table mat-table [dataSource]="rules$ | async" class="mat-elevation-z8">

    <!-- DateModifier Column -->
    <ng-container matColumnDef="Date">
      <th mat-header-cell *matHeaderCellDef>Date</th>
      <td mat-cell *matCellDef="let element">
        {{ element.Reules[0].Date …

我在页面中使用材质表，并且希望表数据源每 5 秒刷新一次，以便值的任何更改都将反映在表中。这就是我现在所做的：

everyFiveSeconds: Observable<number> = timer(0, 5000);

ngOnInit() {
this.everyFiveSeconds.subscribe(() => {
  this.getComponents();
});

getComponents()发送获取请求并将输出分页到材料表。然而问题是，一旦我最初加载此页面，每 5 秒就会发出一次 get 请求。但即使我导航到另一个页面，应用程序也会继续发送请求。如果我重新访问该页面，请求每 2.5 秒发送一次，并且如果我重复，请求的频率会不断增加。

如何修改我的代码，以便仅当我位于此组件页面时才发送此 get 请求，并确保如果我重新访问此页面，不会创建多个计时器？