标签: angular-material-table

我正在尝试制作一个 Angular 组件来显示数据和接收数据。我制作了一个带有输入类型表单字段的 mat-table 和带有 {{element.value}} 的常规数据显示。我将每列的宽度设置为不同的，如下所示：

.mat-column-v{
  width: 32%!important;
}

.mat-column-w{
  width: 17%!important;
}

.mat-column-x{
  width: 17%!important;
}

.mat-column-y{
  width: 17%!important;
}

.mat-column-z{
  width: 17%!important;
}

我的问题是，当我使用输入模式时，列的宽度设置不正确。另一方面，输出模式可以正常工作，如下图所示：

我必须覆盖这些信息，但右侧是输入模式，第一列具有某种随机宽度，左侧是宽度设置正确的输出模式。

我的组件的代码：

  <table mat-table [dataSource]="data">
    <!-- v Column -->
    <ng-container matColumnDef="v">
      <th mat-header-cell *matHeaderCellDef> v </th>
      <td mat-cell *matCellDef="let element"> {{element.v}} </td>
    </ng-container>

    <!-- w Column -->
    <ng-container matColumnDef="w">
      <th mat-header-cell *matHeaderCellDef> w </th>
      <td mat-cell *matCellDef="let element">
        <ng-container *ngIf="type == 'input'">
           <mat-form-field>
            <input matInput [value]="element.w" [(ngModel)]="element.w">
           </mat-form-field>
        </ng-container>
       <ng-container *ngIf="type …

我的网络应用程序使用 Material Data Tale ( https://code-maze.com/angular-material-table/ ) 来显示一些现有数据。它还具有各种过滤器，包括垫数据表的内置搜索过滤器。我的问题是我可以在“清除所有过滤器”按钮按下时重置所有其他自我实现的过滤器，但我找不到一种方法来清除搜索过滤器并让它重置它的过滤数据。

  // This is my data source that is used in the template
  dataSource = new MatTableDataSource<MyObj>();

  // ... more code here ...

  clearFilters(){
        //clear other filters here

        //I want clear dataSource's search filter... but how?
  }

我还没有看到这张贴在其他地方并做这样的事情dataSource.filter = ""还是dataSource.filter = null那么更新观察家不清除文本字段或任何结果。

我尝试在“材质”表的单元格中显示图像。因此，我在HTML文件中尝试了以下代码：

<ng-container matColumnDef="ImageUrl">
  <mat-header-cell *matHeaderCellDef> imageUrl </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.imageUrl}} </mat-cell>
  <img [src]="imageUrl" />
</ng-container>

不幸的是，我的桌子上什么也没有。

我的 mat-table 工作正常，但是当按照官方 api 文档添加 mat-sort 时，它在 ngAfterViewInit 处失败，并显示以下消息

无法设置未定义 aq LeadsComponent.push../src/app/leads/leads.component.ts.LeadsComponent.ngAfterViewInit 的属性“排序”

已经有一篇关于 Mat-table Sorting Demo 的帖子并尝试了它们，但我仍然无法让它工作。

有人可以帮我解决这个问题吗？官方示例使用组件本身定义的“静态”MatTableDataSource，但是我正在从后端进行查询。

MatSortModule 已经导入到 app.module.ts 中，mat-sort-header 指令应用于列，并且 ngAfterViewInit 已经与官方示例中的完全相同......

 export class LeadsComponent implements OnInit,AfterViewInit  {

  displayedColumns: string[] = ['name', 'leadStatus', 'mobile', 'email', 'actions'];
  dataSource: MatTableDataSource<LeadsChildObject>;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(public dialog: MatDialog, private dashBoardService: LeadsService,
    private toast: ToastrService) {
  }

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

      ngOnInit() {
        this.dashboardService.getFeedback.subscribe(
          res => {
            this.leadlist= res;
            this.dataSource = new MatTableDataSource(this.leadlist);
          }
        );
      } …

从这篇文章中我了解到，为了处理大型数据集，您应该在 ngAfterViewInit 中的 dataSource.data之前设置 dataSource.paginator。

但是，在执行此操作时，我无法使用 this.paginator.pageIndex 设置初始 pageIndex。

https://stackblitz.com/edit/angular-mat-table-v2

当我在 ngOnInit 中加载数据并在 ngAfterViewInit 中加载分页器时，我可以设置初始 pageIndex：

https://stackblitz.com/edit/angular-mat-table-v1

Angular Material 表利用 MatTableDataSource 方法来sortData()对表的数据源进行排序。（https://material.angular.io/components/table/api#MatTableDataSource）。它是一个箭头函数：

sortData: ((data: T[], sort: MatSort) => T[])

我需要查看排序后的数据而不实际更改排序。例如，

this.dataSource.sortData = (sortData) => {
    console.log(sortData);
    return sortData;
};

这里的问题是我重写了本机排序功能。return sortData返回原始数据，不进行任何排序。我想做的就是观察排序后的数据而不修改它。是否有可能做到这一点？

我正在尝试使用 formArray 作为输入数据源在角度材料表上实现排序/过滤。

StackBlits 代码链接

dataSource = new MatTableDataSource([]);
<table mat-table [dataSource]="formdataarray.controls" multiTemplateDataRows class="mat elevation-z8" matSort >
<ng-container  matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay" >
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{column}}</th>
<td mat-cell *matCellDef="let element"> {{ element.value[column] }}  </td>
</ng-container>

但排序/过滤不起作用

根据这个示例，我知道我可以编写自己的this.dataSource.filterPredicate. 只要我搜索字符串，这就可以正常工作。我想根据使用的state(= myFilterState) 进行额外过滤。

我尝试使用谓词

this.dataSource.filterPredicate = 
    (data: MyElement, filter: string) => data.myType.useState === this.myFilterState;

我面临的问题是，当我更改this.myFilterState过滤器时，直到我更改filter. 只要filter保持为空，就filterPredicate不会触发。

有没有办法手动触发它 - 尽管 的值filter？

我在我的 Angular7 应用程序中使用了一个带有 firebase 的 mat-table 并成功填充了它。我想添加一个自动递增的序列号。

我的代码的Html：

<mat-table #table2 [dataSource]="dataSource2" matSort>
 <ng-container matColumnDef="sn">
 <mat-header-cell *matHeaderCellDef mat-sort-header> SN. </mat-header-cell>
 <mat-cell *matCellDef="let element; let i = index;">{{i+1}}</mat-cell>
  </ng-container>
 <ng-container matColumnDef="description">
 <mat-header-cell *matHeaderCellDef mat-sort-header> Description </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.description}} </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, 25, 100]" [pageSize]="5" showFirstLastButtons></mat-paginator>

分页问题

• 当我转到下一页时，索引再次从一个开始。
• 如果我每页显示 5 个项目，那么在转到下一页后，它从一个而不是 6 个开始。

我尝试使用 Angular Material 包重新创建一个 mat-table。mat-table 示例最近得到了大量改进，这是惊人的。他们在此提供了带有排序和过滤功能的示例。

我试图在我自己的应用程序的上下文中重现这一点，在此处的stackblitz 上的最小示例中使用虚拟数据。

该表显示并填充了数据，但是只要我输入一个以上的字母，过滤器方法似乎就会错误地删除所有条目，甚至不应该删除的条目。

我在这里能想到的一个区别是，在我的示例中，我在 dataSource: 的声明中使用了一个类dataSource: MatTableDataSource<Match>;，而在 Angular 人员提供的示例中，它是一个接口：dataSource: MatTableDataSource<UserData>;。

然而，这也很可能是一个红鲱鱼，因为我尝试使用界面而不是成功。非常感谢这里的任何帮助。

我有一个角度材料表。当我用 html 包围表格时<div *ngIf="true">，表格会呈现，但单击标题列时数据不再排序。

以以下示例为例：https : //material.angular.io/components/table/overview#sorting

并修改它，只需添加<div *ngIf="true"> ... </div>演示此行为。示例位于：https : //stackblitz.com/edit/angular-quzvjv