标签: mat-table

在我的 Angular 6 应用程序中使用时mat-table，我无法正确设置水平滚动的背景mat-header-row颜色mat-row。CSS 属性仅应用于屏幕的可见部分，一旦向右滚动，就不会分配颜色。

我的表中有大约 30 列，因此肯定需要水平滚动。

我的CSS如下：

.mat-toolbar {
    font-size: 17px;
    font-family: inherit;
    background-color: indigo;
    max-height: 12vh;
}

.mat-elevation-z8 {
    padding: 0px;
}

.mat-table {
    overflow: auto;
    max-height: 68vh;
    min-width: 100%;
}

.mat-header-row {
    position: sticky;
    top: -.5px;
    z-index: 100;
    background-color: gainsboro;
    font-size: 12px;
    min-height: 8vh;
    color: #f5f5f5;
    padding-top: 3px;
}

.mat-row:nth-child(even) {
    background-color: floralwhite;
}

.mat-row:nth-child(odd) {
    background-color: gainsboro;
}

.mat-row {
    min-height: 8vh;
}

.no-results {
    display: flex;
    justify-content: center; …

我正在创建一个应按文件名和日期排序的表，为此我遵循了 Angular Material 文档，但不起作用，它没有在编译器或浏览器控制台中显示任何错误，该表如下所示：

<mat-table [dataSource]="dataSource" matSort>
      <ng-container matColumnDef="File">
        <mat-header-cell *matHeaderCellDef mat-sort-header> File </mat-header-cell>
        <mat-cell  *matCellDef="let element" data-label="File"> {{element.fileName}} </mat-cell>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="Date">
        <mat-header-cell  *matHeaderCellDef mat-sort-header>Date </mat-header-cell>
        <mat-cell  *matCellDef="let element" data-label="Date"> {{element.date}} </mat-cell>
      </ng-container>
      <!-- Weight Column -->
      <ng-container matColumnDef="Extension">
        <mat-header-cell *matHeaderCellDef mat-sort-header>Extension</mat-header-cell>
        <mat-cell  *matCellDef="let element" data-label="Extension"> {{element.extension}} </mat-cell>
      </ng-container>



      <ng-container matColumnDef="View">
        <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
        <mat-cell  *matCellDef="let element" data-label="View"> <a href="{{element.url}}" target="_blank" class="green-text"><i class="material-icons">visibility</i></a></mat-cell>
      </ng-container>

      <ng-container matColumnDef="Delete">
        <mat-header-cell *matHeaderCellDef> Delete </mat-header-cell>
        <mat-cell  *matCellDef="let element" data-label="Delete"> …

我的mat-table文件和文件夹中有不同类型的项目。
它们必须像在 Microsoft 的文件浏览器中一样进行排序。文件夹不能与文件夹分开，文件也不能分开。
所有其他排序规则保持不变。

有谁知道如何解决这个问题？先感谢您！

我正在尝试创建一个具有反应形式的角材料表。我需要添加一些属性，所以我使用 formArray。但我的表没有显示任何结果，并且角度让我返回相同的错误：

错误类型错误：无法读取未定义的属性（读取“headerCell”）

这是我到现在为止得到的：

超文本标记语言

<button mat-button mat-raised-button (click)="addParameterWhatsApp()" color="primary">Add</button>

    <form [formGroup]="form" autocomplete="off">
    
      <table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8" formGroupName="whatsapp">
        <ng-container formArrayName="parameters">
          <ng-container *ngFor="let dados of parameters.controls; let i = index ">
    
            <div [formGroupName]="i">
    
              <ng-container matColumnDef="posicao">
                <th mat-header-cell *matHeaderCellDef> Posicao </th>
                <td mat-cell *matCellDef="let element">
                  <mat-form-field appearance="outline">
                    <mat-label>Posicao</mat-label>
                    <input matInput formControlName="posicao">
                  </mat-form-field>
                </td>
              </ng-container>
    
              <ng-container matColumnDef="valor">
                <th mat-header-cell *matHeaderCellDef>Valor</th>
                <td mat-cell *matCellDef="let element">
                  <mat-form-field appearance="outline">
                    <mat-label>Valor</mat-label>
                    <input matInput formControlName="valor">
                  </mat-form-field>
                </td>
              </ng-container>
          </ng-container>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; …

在 Angular Material 上为垫子表添加页脚时，出现以下错误：

column.footerCell 未定义

下面是我的代码：

<table mat-table [dataSource]="people" class="mat-elevation-z8">
    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>Name</th>
        <td mat-cell *matCellDef="let element">
            <strong>{{ element.name }}</strong>
        </td>
        <td mat-footer-cell *matFooterCellDef> {{ people.length }} people</td>
    </ng-container>

    ...

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    <tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
</table>

数据如下：

public displayedColumns = ['name'];
public people = [
  {id: 1, name: 'John'},
  {id: 2, name: 'Jane'},
  {id: 3, name: 'Joe'},
];

如果我删除页脚代码，一切都会正常。对此有什么想法吗？

我想使用带有 mat-paginator 的 Angular mat-table 来控制带有 http 请求的页面更改。所以，我从我的服务器收到一个具有以下属性的对象：

content: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
first: true
last: false
number: 0
numberOfElements: 10
pageable: {sort: {…}, offset: 0, pageSize: 10, pageNumber: 0, paged: true, …}
size: 10
sort: {sorted: false, unsorted: true}
totalElements: 82
totalPages: 9
__proto__: Object

属性“number”是当前页面的数量，“totalPages”是我拥有的页面总数。

我试图实现这样的垫分页器：

<mat-paginator [length]="paginas" [pageSize]="10"></mat-paginator>

变量“paginas”存储属性“totalPages”，并正确显示：

问题是，如您所见，箭头按钮预览和前进被禁用。我知道我必须做更多的实现，但是 Angular Material 的官方文档并没有展示如何去做。

在角垫表中，我有以下代码可以在单击表上的任意位置时展开表行。

现在我想禁用基于属性“element.disable”触发的某些行单击操作。

        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef> Id</th>
          <td mat-cell *matCellDef="let element" class="example-element-row data_align"
           [class.example-expanded-row]="expandedElement === element"
           (click)=" expandedElement = expandedElement === element ? null : element">     {{element?.id}} </td>
        </ng-container>

我尝试添加

[禁用] =“元素.禁用”

但是，这不起作用。

如何禁用某些行的点击？

我有一个 Angular 9，打开了 Ivy，组件有多个垫子表。一张表的行中的输入字段绑定到反应式表单。我将表绑定到表单数组。这很好用...但是，当我加载带有值的formarray时，我得到了有趣的“ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。'ng-valid'的先前值：'true'。当前值：'false'”错误。

另外，如果我在组件上设置changeDetection：ChangeDetectionStrategy.OnPush，它工作正常，但我显然失去了更改检测......

这是我的设置（精简）：

反应形式：

quoteForm = new FormGroup({
    QuoteNumber:new FormControl(''),
    ContractTerm:new FormControl(''),
    ContractStartDate:new FormControl(''),
    QuoteName: new FormControl('', Validators.required),
   ...
    Items: this.fb.array([])
  });



async ngOnInit(): Promise<void> {
  ...
  this.QuoteItems = await this.CIM.GetQuoteItems(this.CurrentQuoteNumber);
  const itemsArray = this.quoteForm.get('Items') as FormArray;
  ...
  this.QuoteItems.forEach(item => {
      let NewObj = this.fb.group({
      isNew:false,
     ...
     });
     ...
     itemsArray.push(NewObj);
   });    
  }

  this.ItemdataSource=new MatTableDataSource(this.quoteForm.get('Items').value);
  this.ItemdataSource.paginator = this.paginator.toArray()[0];

}

表格 HTML（已修剪）：

<table mat-table [dataSource]="ItemdataSource" multiTemplateDataRows formArrayName="Items"> 
...
 <tr mat-header-row *matHeaderRowDef="ItemColumns"></tr>
 <tr mat-row *matRowDef="let row; columns: ItemColumns;" class="element-row" [class.expanded-row]="expandedElement …

我有一些带有 mat-paginator 的 mat-table，如下所示：

                 <table mat-table style="width: 100%;" [dataSource]="dataSource">\n                    <ng-container matColumnDef="evento">\n                        <th mat-header-cell *matHeaderCellDef> Evento </th>\n                        <td mat-cell *matCellDef="let row"> {{row.evento}} </td>\n                    </ng-container>\n                    <ng-container matColumnDef="fecha">\n                        <th mat-header-cell *matHeaderCellDef> Fecha </th>\n                        <td mat-cell *matCellDef="let row">{{row.fecha}} </td>\n                    </ng-container>\n                    ..... more columns .....\n                    <ng-container matColumnDef="edit">\n                        <th mat-header-cell *matHeaderCellDef style="text-align: right; margin-right: 8px;"> Edit </th>\n                        <td mat-cell *matCellDef="let row" style="text-align: right;">\n                            <button mat-icon-button (click)="editEvent(row)">\n                                <mat-icon>edit</mat-icon>\n                            </button>\n                        </td>\n                    </ng-container>\n\n                    <tr mat-header-row *matHeaderRowDef="displColumns"></tr>\n                    <tr mat-row *matRowDef="let row; columns: displColumns"></tr>\n                </table>\n                <mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20]" …

我正在对 mat-table 进行排序和删除/添加。

我一直在读这篇文章，无需排序即可正常工作。

当我在表上使用mat-table和属性时，停止工作。matSortrenderRows()

堆栈闪电战

一旦我删除排序属性，它就会再次起作用。

我找到了一个替代解决方案，但最好知道我是否做错了什么，是否有其他人使其工作，这是一个错误还是预期的行为？

不起作用：

delete(index: number): void {
  this.dataSource.data.splice(index, 1);
  this.table.renderRows();
}

有效：

delete(id: number): void {
  this.dataSource.data = this.dataSource.data.filter( (item: any) => item.id !== id);
}