标签: angular-material-table

参数 1：时间段 {{element.value}} 参数 2：性别 {{element.gender}}

<ng-container matColumnDef="column3">
  <mat-header-cell *matHeaderCellDef rowspan="2"> Patients with Base Condition </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column4">
  <mat-header-cell *matHeaderCellDef> Patients with Outcome</mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column5">
  <mat-header-cell *matHeaderCellDef class="ColumnDivider"> Prevelance </mat-header-cell>
  <mat-cell *matCellDef="let element" class="ColumnDivider"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column6">
  <mat-header-cell *matHeaderCellDef> Patients at Risk </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column7">
  <mat-header-cell *matHeaderCellDef> New Patients with Outcome </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
</ng-container>

<ng-container matColumnDef="column8"> …

我有一个使用角项目mat-table和mat-paginator对于特定视图，问题是该视图具有网格视图和表格视图与肘节，网格视图是默认和表是使用NgIf时隐时现的网格视图是活动的。如果我将默认设置为表格视图，则分页工作正常，除非我切换到网格视图并返回，如果默认设置为网格，则在我切换到表格视图时会中断。我猜是因为当这段代码运行时表是隐藏的：

this.sliceList = new MatTableDataSource<Slice>(result);
this.sliceList.paginator = this.paginator;

我尝试了控制台日志记录this.sliceList，但sliceList.paginator在默认网格视图时未定义，因此我认为这是问题所在。我怎样才能解决这个问题？

我正在 Angular8 中使用 Material 表构建一个表。

我使用一个字符串数组来定义 displayColumns 并将每个数组值传递给 matColumnDef 指令。

这是正常工作。

TS

displayedColumns: any[] = ['username', 'firstname', 'lastname'];

HTML

<div class="table-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container *ngFor="let column of displayedColumns;" [matColumnDef]="column">
      <th mat-header-cell *matHeaderCellDef> {{ column }} </th>
      <td mat-cell *matCellDef="let element"> {{ element[column] }} </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

问题：是否可以将 displayColumns 定义为对象数组而不是字符串数组？

我想为列显示值设置不同的值，还可能有条件地设置一些其他列属性。

示例：注意displayColumns 是一个对象数组。这不起作用。

TS

  displayedColumns: any[] = [
    { name: 'username', display: 'User Name' },
    { name: 'firstname', …

我正在尝试制作可重复使用的材料表，并且我想使用TemplateRefwithngTemplateOutlet来生成列。在这个例子中，我创建了cards使用我的material-table组件的组件。在cards.component.html我有我的表格列之一的模板。运行该项目将导致错误ERROR TypeError: Cannot read property 'template' of undefined（请参阅 上的控制台stackblitz）。是否可以将 columnt 模板传递给我MaterialTableComponent并使用它来定义列？

 <table mat-table [dataSource]="data" class="mat-elevation-z4">
  <ng-container
    *ngFor="let column of displayedColumnObjects"
    [matColumnDef]="column.id"
  >
  <!-- if where is cellTemplate in table config json, use cellTemplate  -->
    <ng-container
      *ngIf="column.cellTemplate" 
      [ngTemplateOutlet]="column.cellTemplate"
    >
    </ng-container>

    <ng-container *ngIf="!column.cellTemplate">
      <th mat-header-cell *matHeaderCellDef> {{column.title}} </th>
      <td mat-cell *matCellDef="let element"> {{element[column.id]}} </td>
    </ng-container>

  </ng-container>

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

我使用Angular Material Table，并且在表的页脚行中需要一个命令按钮和该表的分页器，如下所示

我的代码实际上是这样的

<div class="example-table-container mat-elevation-z8">

  <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
    <!-- DataSource's displayedColumns -->
    <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
      <th mat-header-cell *matHeaderCellDef> {{column}} </th>
      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>


    <!-- Exporter column -->
    <ng-container matColumnDef="exporter">
      <td mat-footer-cell *matFooterCellDef colspan="2">
        <button class="btn btn-primary" (click)="exportCsv(dataSource)">
          <i class="material-icons" title="Exporter en CSV">save_alt </i>
        </button>
      </td>
    </ng-container>

    <!-- Paginator column -->
    <ng-container matColumnDef="paginator">
      <td mat-footer-cell *matFooterCellDef colspan="3">
        <mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>
      </td>
    </ng-container>

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

我正在寻找当角度材质表（mat-table）渲染完成时触发的事件。

我认为需要在数据源更改时触发，或者用户更改显示的列或发生分页事件（但与数据源更改相同），或者发生重新渲染事件的任何其他事件。

我尝试了通用，ngOnChanges但当用户更改显示的列时它不会触发。

有类似的活动我可以听吗？

我有一个如下所示的API响应：

{
  "2019-02-13": {
    "costs": 117,
    "commission": 271.07
  },
  "2019-02-14": {
    "costs": 123,
    "commission": 160.37
  },
  //etc..
}

我想将此对象用作物料数据表的数据源，但出现此错误：

提供的数据源与数组，Observable或DataSource不匹配

我尝试使用像这样的单元格定义：

//cost
<td mat-cell *matCellDef="let item | keyvalue"> {{item.value.costs}} </td>
//date
<td mat-cell *matCellDef="let item | keyvalue"> {{item.key}} </td>

但这没有用。

我当然可以遍历我的对象并制作一个像这样的数组：

[
  {
    commission: 100,
    costs: 45
    date: '2019-02-13'
  },
  {
    commission: 100,
    costs: 45
    date: '2019-02-13'
  }
]

这可能会解决我的问题，但是我不想这样做，因为我觉得这是不必要的。

编辑

我通过将以下代码添加到我的服务呼叫中来修复它：

let data = [];
for (let key in response) {
  let value = response[key];
  let obj = {date: …

我正在使用角度材料在 angular6 中创建一个应用程序。如何在单个表中使用 2 个分页。 我想在页眉和页脚两个地方显示分页。

标题分页仅显示带有下拉菜单的“每页项目数”。页脚分页将显示箭头和所有内容。

当我添加 2 个分页时，第二个分页不起作用。

请参考截图

谢谢。

我正在尝试在 Angular 材料中添加 html 内容，但标签在 html 中显示为简单文本，例如“第一行<br>。这里应该是一个新行”我该怎么做？

我正在使用 Angular 材料表并尝试修复几列的宽度，如下所示：

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

 <ng-container matColumnDef="email">
  <mat-header-cell *matHeaderCellDef class="myHeader"> No. </mat-header-cell>
  <mat-cell *matCellDef="let element" > {{element.email}} </mat-cell>
 </ng-container>

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

</mat-table>

在CSS中：

table {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.mat-column-email{
  width: 150px;
}

我在某处读到我们可以通过使用这种格式来修复列宽：

.mat-column-matColumnDef(Field name) {
 //CSS
 }

但无论如何，上述格式似乎都不起作用。谁能帮我解决我做错了什么吗？