标签: mat-table

我有这张表，用于多个数据。

我的问题是数据显示正确，但分页器和排序不起作用。

排序只显示箭头，但不会排序

分页器不会计算项目并显示“0 of 0”

这是我的代码：component.html

<mat-table class="lmat-elevation-z8" [dataSource]="dataSources[pagePart]" matSort>
    <ng-container *ngFor="let column of columns[pagePart]" [matColumnDef]="column.columnDef">
        <mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.header }}</mat-header-cell>
        <mat-cell *matCellDef="let row">{{ row[column.columnDef] }}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="azioni">
        <mat-header-cell *matHeaderCellDef>Azioni</mat-header-cell>
        <mat-cell *matCellDef="let row">
            <button>... here there's a list of action buttons for each row ...</button>
        </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns[pagePart].concat('azioni'); sticky:true"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns[pagePart].concat('azioni')"></mat-row>
</mat-table>

我加载数据的代码是：component.ts

displayedColumns={};
columns={};
dataSources={};

@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;

loadPart(part){
    this.http.get("myapi").subscribe(data=>{
        // load data
        var datas=[];
        for(var k=0; k<data["length"]; ++k){
            datas.push(data[k]); …

我无法显示我的表索引。这是一个示例表：

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

<!--Column definitions-->        
    <ng-container matColumnDef="{{columnProp.name}}" *ngFor="let columnProp of columnProps; let i = index;">
        <mat-header-cell *matHeaderCellDef
                         mat-sort-header>
            {{columnProp.name}} {{i}}
        </mat-header-cell>

        <mat-cell *matCellDef="let element; let j = index;">
            <div>{{element[columnProp.name}} {{j}}</div>
        </mat-cell>
    </ng-container>

    <!--Row definitions-->
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

    <!-- Row content-->
    <mat-row *matRowDef="let row; columns: displayedColumns; let k = index;"
             matRipple
             (click)="this.expandRow(row, k)">
    </mat-row>

    <!--Expanded row content-->
    <mat-row *matRowDef="let row; columns: ['expandedContent'];"
             [@detailExpand]="row == expandedElement ? 'expanded' : 'collapsed'">
    </mat-row>
</mat-table>

列索引i并按j预期显示，但是当我单击行时，索引k显示为未定义。我在这里做错了什么？

标题已经说了，我应该使用那一个，在那里/拥有之间有什么区别

<table mat table [dataSource]="items" ...

要么

<mat table [dataSource]="items" ...

在我的HTML标记中？

粗略地看一下，它们都可以正常工作，但是我认为一定有区别...

编辑： 我专门谈论可调整大小的列，例如在此示例中：https ://stackblitz.com/edit/angular-rtfc5v?file=src%2Fapp%2Fapp.component.html

如果您切换

我想使用 a<mat-table>来显示选项的名称及其对应的给定值（供用户更改）。由于选项可能需要通过不同方式（例如滑动切换或垫子选择）设置其值，因此我必须在没有数据源的情况下将其写下来（或者至少据我所知，不能在打字稿文件中使用预先编写的 html 标签）。

因此，我的 MWE 将是这样的：

<mat-table>
    <mat-header-row *matHeaderRowDef>
        <mat-header-cell>header</mat-header-cell>
    </mat-header-row>

    <mat-row>
        <mat-cell>
             cell
        </mat-cell>
    </mat-row>
</mat-table>

但是，当我查看我的页面时，它只显示一行没有任何字符串。我想在一个<mat-card>（或者更确切地说<mat-card-content>）内使用这个表，但即使我在它之外尝试它，我也只是得到了这条线而没有别的。这是垫卡中的样子：

如何正确显示表格？

*编辑：* 因为它被要求，这里也是.ts文件。

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-general',
  templateUrl: './general.component.html',
  styleUrls: ['./general.component.scss']
})
export class GeneralComponent implements OnInit {


  @ViewChild('resolutionSelect') resolutionSelect: MatSelect;

  resolutions: ResolutionOptionsInterface[] = [
    { value: '1920 x 1080' },
    { value: '800 x 600' }
  ];
  public selectedRes = this.resolutions[0];
  public isFullscreenEnabled = true;

  constructor() { …

我正在 HTML 中使用 Angular-Material 制作表格，但收到错误 Cannot read property 'template' of undefined at MatHeaderRowDef.extractCellTemplate

ts 文件包含

export class BankListComponent implements OnInit{

    dataSource = new BankDataSource(this.bankService);

    displayedColumns = ['ifsc', 'bank_id', 'branch', 'address', 'city', 'district', 'state', 'bank_name']

    constructor(private bankService: BankService){}

    ngOnInit(){

    }

}


export class BankDataSource extends DataSource<any>{

    constructor(private bankService: BankService){
        super();
    }

    connect(): Observable<Bank[]> {
        return this.bankService.getData();
    }

    disconnect() {}

}

在 HTML 中

<ng-container matColumnDef="bank_name">
    <mat-header-cell #matHeaderCellDef>Bank Name</mat-header-cell>
    <mat-cell *matCelDef="let bank">{{bank.bank_name}}</mat-cell>
</ng-container>

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

需要一个漂亮的表格并收到以下错误。

BankListComponent.html:2 …

我更改了mat-table中的direction列，之后无法将ng-container添加到表中。我是这样做的。在这种情况下，如何在我的内容中添加预定义的行？

component.ts

export class MyComponent implements OnInit {
    displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'actions'];
    dataSource = ELEMENT_DATA;
    fourthFormGroup: FormGroup;
    displayColumns: string[];
    displayData: any[];

    constructor(
        private _formBuilder: FormBuilder
    ) { }

    ngOnInit() {
        this.displayColumns = ['0'].concat(this.dataSource.map(x => x.position.toString()));
        this.displayData = this.displayedColumns.map(x => this.formatInputRow(x));
        this.fourthFormGroup = this._formBuilder.group({});
    }

    formatInputRow(row) {
        const output = {};

        output[0] = row;
        for (let i = 0; i < this.dataSource.length; ++i) {
            output[this.dataSource[i].position] = this.dataSource[i][row];
        }

        return output;
    }
}

component.html

<table mat-table …

我已经创建了一个带有可扩展行的mat-table，就像在Angular 8中这样：

https://stackblitz.com/angular/pmagobelkkg?file=app%2Ftable-expandable-rows-example.ts

但是，如上例所示，仅当我单击该行中的某个位置时，该行才会展开。有什么方法可以在每一行中添加向上和向下箭头图标，以便仅当我单击每一行中的图标时，该行才会展开吗？

非常感谢你！

抱歉，如果这个问题很琐碎，我对 Angular 和 Web UI Kingdom 很陌生

我目前正在查看这个示例项目：https ://github.com/marinantonio/angular-mat-table-crud

我正在替换列的创建方式（从静态到动态），并且表布局变成了难以阅读的内容。我无法理解这是如何/为什么发生的。我创建专栏的方式有何不同？但是，最重要的是，我该如何解决它？

这是我所拥有的：

组件.html：

<ng-container *ngFor="let column of columns" matColumnDef="{{column.name}}">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>{{column.label}}</th>
  <td mat-cell *matCellDef="let row"> {{row[column.name]}} </td>
</ng-container>

组件.ts

columns: Array<any> = [
    { name: 'id',         label: 'ID',         cell: (element: any) => `${element.id}` },
    { name: 'title',      label: 'Title',      cell: (element: any) => `${element.title}` },
    { name: 'state',      label: 'State',      cell: (element: any) => `${element.state}` },
    { name: 'url',        label: 'Url',        cell: (element: any) => `${element.url}`},
    { name: …

我有一个在其模板中呈现 mat-table 的组件。我想预先选择一些行。我的 SelectionModel 包含代表每个选定项目的对象（不是简单的字符串或数字），并且比较这些对象的方法比本机 SelectionModel 的方法更复杂。

如果这是一个垫选择表单控件，我可以使用 [compareWith] 指令来提供自定义比较函数，例如

<mat-select [compareWith]="myCompareFunction"  >...

但这不是合适的解决方案 - 因为我需要表格演示。我密切关注 Angular 文档中的示例。这里的mat-table 示例：每行都有一个带有选择复选框的 mat-table，这是我遵循的方法。

在示例的组件代码中，它使用 SelectionModel 对象。

import {SelectionModel} from '@angular/cdk/collections';
....
....
selection = new SelectionModel<PeriodicElement>(true, []);

我正在寻找一种为 SelectionModel 对象提供自定义比较函数的方法。SelectionModel 是否可以通过函数的重写进行子类化，或者可以以某种方式“注入”方法吗？

我尝试对 SelectionModel 进行子类化并声明一个新的 CompareWith 函数，但这似乎不是所需要的。有人可以建议吗？

   import { SelectionModel } from '@angular/cdk/collections';
   import { InputOptionIf } from '../formosa-interfaces/dynamic-field-config-if';

   export class ModalSelectSelectionModel extends SelectionModel<InputOptionIf>{
      compareWith(o1:any,o2:any) {
        console.log("ModalSelectSelectionModel.compareWith()")
        return( <InputOptionIf>o1.label==<InputOptionIf>o2.label);
      }
   }  

当我对 mat-table 的一列进行排序时，我无法再扩展我的行，只有大约二分之一仍然有效。虽然在没有排序的情况下一切正常。\n我遇到了这个链接： https: //github.com/angular/components/issues/11990#issuecomment-421075196 \n但这根本不能解决任何问题

组件.html：

            <td mat-cell class="expandable-row" *matCellDef="let element" [attr.colspan]="displayedColumns.length">\n                <div *ngIf="element.codeTicket === expandedSymbol" class="container">\n                    <div class="row">\n                        <div class=" col-md-1"></div>\n                        <div class=" col-md-10">\n                            <mat-card >\n                                <p style="white-space: pre-wrap;"><span class="badge badge-pill badge-light" id="badge">Description :</span>{{element.description}}</p>\n                                <div>\n                                    <mat-chip-list #chipList aria-label="Mots Cl\xc3\xa9s">\n                                        <span class="badge badge-pill badge-light" id="badge">Label :</span>\n                                        <mat-chip *ngFor="let mot of element.motCles" matTooltip="{{mot.categorie.libelle}}"\n                                                  [ngClass]="{\'secondClass\': mot.codeCategorie === 1,\'firstClass\': mot.codeCategorie === 2,\'thirdClass\': mot.codeCategorie === 3,\'quatriemeClass\': mot.codeCategorie === 4,\'cinquiemeClass\': mot.codeCategorie === 5,\'sixiemeClass\': mot.codeCategorie === 6,\'spetiemeClass\': mot.codeCategorie === 7 }">{{mot.libelle}}</mat-chip>\n                                    </mat-chip-list>\n                                </div>\n …