标签: mat-table

我正在使用 mat-table 并且我试图将MatTableDataSource与 observable一起使用（我从 Web 服务获取数据），但我不知道如何配置MatTableDataSource以使用 observable 而不是数组。

这个问题的唯一解决方案是在ngOnInit方法中订阅 observable并在新数据到达时始终创建一个新的 MatTableDataSource 吗？

这是我到目前为止所拥有的，但我不知道这是否是使用可观察的MatTableDataSource的正确解决方案。

dataSource: MatTableDataSource<Thing>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;

ngOnInit() {
    getThings().subscribe(things => {
        this.dataSource = new MatTableDataSource(things);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        });
}

我正在使用 Angular 9。如何构造一个没有表头行（th）的 mat-table？听起来很傻，但如果我这样做

<table mat-table *ngIf="isMobile" #mobile_table [dataSource]="dataSource">\n  <ng-container matColumnDef="item">\n    <td mat-cell *matCellDef="let item_stat">\n      <div class="smallHeading">\n        {{ item_stat.max_date }} m\n      </div>\n      <div class="mainRow divider">\n        <a href="{{ item_stat.mobile_path }}">{{ item_stat.title }}</a> \xc2\xb7\n        {{ getScore(item_stat) }}\n      </div>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef="mobileDisplayedColumns"></tr>\n  <tr mat-row *matRowDef="let row; columns: mobileDisplayedColumns;" [ngClass]="getRowClass(row)"></tr>\n</table>\n

它产生错误

ERROR TypeError: Cannot read property 'template' of undefined\n    at MatHeaderRowDef.extractCellTemplate (table.js:567)\n    at table.js:2522\n    at Function.from (<anonymous>)\n    at MatTable._getCellTemplates (table.js:2512)\n    at MatTable._renderRow (table.js:2467)\n    at table.js:2326\n    at Array.forEach (<anonymous>)\n    at …

我尝试添加rowSpan and colSpan在Angular material Table header。任何人都可以帮助我实现它。

下面是我想使用材料表获得的附加标题

我想要的内容如下图所示。我使用 Angular Material (7.x) 并使用这里描述的 Mat-Table 实现：https : //material.angular.io/components/table/overview

上面的场景是为业务展示多张销售发票。

我已经使用了 Angular 的 Mat Table 来为一行使用多行，这是有效的。但是现在我还必须使第一行（A 型）在多行表中具有多行。

我有一些关于如何使其工作的想法，但我不想开始并事先知道解决方案是否有效。

我开始遍历 salesInvoices 中的对象：

  <tr mat-header-row *matHeaderRowDef="displayedPurchaseInvoiceColumns"></tr>
  <ng-container *ngFor="let item of invoices.salesInvoice">
    <tr mat-row class="table-first-row" *matRowDef="let row; columns: displayedSalesInvoiceColumns"></tr>
  </ng-container>
  <tr mat-row class="table-second-row" *matRowDef="let row; columns: displayedPurchaseInvoiceColumns"></tr>

这没有显示任何有用的东西。我认为它甚至没有做任何事情，因为我只看到显示的购买发票，而不是销售发票。

我正在考虑在第一行使用垫子表？我不知道我是如何做到这一点的，我也不确定这是否有效。

我真的很想Mat-Table让它与它一起工作，但恐怕我无法让它与 Material 库一起工作，并且必须定制一些东西。

欢迎任何帮助！如果我需要提供更多信息，请告诉我。

我有一个清单，它使用由 MatTableDataSource 提供的 mat-table 组件。

在 component.html

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

在 component.ts

dataSource = new MatTableDataSource();

当我点击删除一个项目时，在来自服务器的成功回调上，我通过重新实例化 MatTableDataSource(this.resources) 更新列表以反映新的结果集，并像这样传入新的结果集。这确实有效...

this.PHService.getResources().subscribe(resources => {
  this.resources = resources;
  this.dataSource = new MatTableDataSource(this.resources);
  this.dataSource.sort = this.sort;
});

然而，即使这有效，我觉得这是错误的。

我读过一些文章，指出我必须扩展数据源？并调用 renderRows() 方法？我已经尝试过这个，但我似乎无法让它在我的场景中工作。

我知道这是代表我缺乏理解。

任何帮助/建议将不胜感激。

提前致谢。

单击 mat-table 中的按钮后，我试图隐藏一行。我不知道该放在哪里*ngIf。我试过了，ng-container但它不起作用。下面是我的 HTML 文件。

<mat-table class="lessons-table mat-elevation-z8" [dataSource]="application">
  <ng-container matColumnDef="ID">
    <mat-header-cell *matHeaderCellDef>ID</mat-header-cell>
    <mat-cell *matCellDef="let application">{{application.id}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="Name">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell *matCellDef="let application">{{application.name}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="ApplicationDate">
    <mat-header-cell *matHeaderCellDef>Application Date</mat-header-cell>
    <mat-cell *matCellDef="let application">{{application.applyDate}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="TrackingNumber">
    <mat-header-cell *matHeaderCellDef>Tracking Number</mat-header-cell>
    <mat-cell *matCellDef="let application">{{application.trackNumber}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="Operation">
    <mat-header-cell *matHeaderCellDef>Operation</mat-header-cell>
    <mat-cell *matCellDef="let application">
      <button mat-raised-button color="primary" (click)="onClickGrant()">Grant</button>&nbsp; &nbsp; &nbsp;
      <button mat-raised-button color="warn" (click)="onClickDeny()">Deny</button>
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5,10,15,20]" [pageSize]="5" showFirstLastButtons></mat-paginator>

我使用 Angular 6、Firebase 和 Angular Material。

我有 30,000 个 json 对象存储在 firebase 中，我想将它们加载到 mat-table 中。只有我得到的远低于我希望的。我等了 30 秒才可以点击我的应用程序，有时 chrome 会出错......

但是我在分页后加载我的数据。

有人可以告诉我这是否正常，或者是否有解决此问题的策略？谢谢你。

也许我可以用 angular 7 和无限滚动来做到这一点？你有一个例子请求吗？

export class TableComponent implements OnInit {

    showSpinner = true;

    Data = {nom: '', finessgeo: '', cat1: '', commune: '', CP: '', departement: '', tel: ''}

    displayedColumns = ['nom', 'finessgeo', 'cat1', 'commune', 'CP', 'departement', 'tel'];

    dataSource = new MatTableDataSource();

    applyFilter(filterValue: string) {
        filterValue = filterValue.trim();
        filterValue = filterValue.toLowerCase();
        this.dataSource.filter = filterValue;
    }

    @ViewChild(MatPaginator) paginator: MatPaginator;

    @ViewChild(MatSort) …

Angular 7带来了强大的功能DragDropModule：https : //material.angular.io/cdk/drag-drop/examples

该文档涉及重新排列列表中的项目或在多个列表之间转移项目。但是，它没有谈论表。

我想知道是否有一种舒适的方法使用角材料的拖放系统对mat-table或cdk-table中的行进行重新排序。

（您可以添加cdkDropList使其mat-table使该机制起作用，但没有所有精美的动画和默认的拖动占位符。）

是否存在像易于实现的默认值那样通过拖放对表行进行排序的东西？

我想mat-table在 Angular 中放置一个删除按钮或 Angular 垃圾桶图标。我怎样才能实现它？我的工作表代码：

<mat-table #table [dataSource]="ELEMENT_DATA">
  <ng-container cdkColumnDef="position">
    <mat-header-cell *cdkHeaderCellDef fxFlex="40%">Position</mat-header-cell>
    <mat-cell *cdkCellDef="let config" fxFlex="40%">{{config.position}}</mat-cell>
  </ng-container>

  <ng-container cdkColumnDef="name">
    <mat-header-cell *cdkHeaderCellDef fxFlex="30%">Label</mat-header-cell>
    <mat-cell *cdkCellDef="let config" fxFlex="30%">{{config.name}}</mat-cell>
  </ng-container>

  <ng-container cdkColumnDef="weight">
    <mat-header-cell *cdkHeaderCellDef fxFlex="10%">Order</mat-header-cell>
    <mat-cell *cdkCellDef="let config" fxFlex="10%">{{config.weight}}</mat-cell>
  </ng-container>

  <ng-container cdkColumnDef="symbol">
    <mat-header-cell *cdkHeaderCellDef fxFlex="10%">Symbol</mat-header-cell>
    <mat-cell *cdkCellDef="let config" fxFlex="10%">{{config.symbol}}</mat-cell>
  </ng-container>

  <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *cdkRowDef="let config; columns: displayedColumns;"
           (click)="editConfig(config.id)"></mat-row>

我试图弄清楚如何使用 Angular mat-table 对列进行分组。我不知道如何开始，我似乎无法在任何地方找到一个例子。前两个部分需要像下图这样分组：