标签: angular-material-table

我正在使用有角度的材料表来显示数据并动态绑定表头和表数据。有没有办法动态格式化特定列的单元格内容？

例如，我如何格式化金额列的值右对齐？

我的代码如下：

<table mat-table [dataSource]="dataSource" class="" style="width: 100%;">

      <ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns; let i = index">
        <th *matHeaderCellDef> {{displayedFields[i].name}}</th>
        <td mat-cell *matCellDef="let element"> {{ element[col] }} </td>
      </ng-container> 

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

我的数据就像

[
  {
    "REFERENCE_ID": "ENT201810637610",
    "PRODUCT_TYPE": "IMPS",
    "CUSTOMER_REFERENCE": "CUS12123",
    "BENEFICIARY_NAME": "arun",
    "DEBIT_ACCOUNT": "100002258062",
    "AMOUNT": 342234,
    "STAGE_CODE": "FULLFILMENT",
    "STATUS_CODE": "NEW"
  },
  {
    "REFERENCE_ID": "ENT201808820426",
    "PRODUCT_TYPE": "IMPS",
    "CUSTOMER_REFERENCE": "12121",
    "BENEFICIARY_NAME": "Arun",
    "DEBIT_ACCOUNT": "32423424",
    "AMOUNT": 700,
    "STAGE_CODE": "INITIATION",
    "STATUS_CODE": "NEW"
  }
]

我有一个有角度的材质表，该表使用detailRow指令将明细/同级相邻行插入到表行中。

StackBlitz

我想给它一个外观，好像该行正在扩展或折叠一样，因此我向其中添加了几个图标，这些图标可以在包含它们的单元格单击时切换。

<mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
      <mat-cell *matCellDef="let element"> 
         <button mat-icon-button color="primary"  (click)="element[i] = !element[i]">
            <mat-icon id="expand_more"  #expand_more *ngIf="!element[i] "  >expand_more</mat-icon>
            <mat-icon id="expand_less"  #expand_less *ngIf="element[i] ">expand_less</mat-icon>
          </button> 
      </mat-cell>

但是，如果我将行扩展并进行分页或进行某种排序，则图标不会切换，因为无法切换它们。

我试过挂入page事件或sortChange事件，但空了。

我知道，有一种新方法可以在角形材质v7中进行扩展/折叠，这可能与分页和排序效果很好，但是在升级之前还需要一段时间，与此同时，对于解决该问题，任何人都没有任何想法。

我有一个简单的角度材质表：

<table mat-table [dataSource]="scoreboardData">
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>
    <ng-container matColumnDef="totalScore">
      <th mat-header-cell *matHeaderCellDef> Total Score </th>
      <td mat-cell *matCellDef="let element"> {{element.totalScore}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

我想在行之间以及边框之间添加一些额外的边距，甚至可能添加一些填充。我发现我可以更改行的背景颜色，但不能对行应用边距，填充或边框。

tr.mat-row {
    background: #2f5b98; /* Old browsers */
    background: -moz-linear-gradient(top, rgba(74,144,239,1) 20%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(74,144,239,1) 20%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(74,144,239,1) 20%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, …

我正在使用 Angular 7，我有一个带有Angular Material Table的简单组件。通过某些事件，例如单击鼠标，我希望能够更新该现有表的数据和表头。

前：

之后（目标）：

目前，我正在获取数据更新。但是，我无法更新列的标题文本，除非我做了一个相当糟糕的窗口超时调用。

这很难描述，因此stackblitz 存储库应该会有所帮助。在我链接到那里的“table-dynamic-columns.example.ts”文件中，我在“changeColumnHeader”按钮单击处理程序上尝试了两种不同的策略。看来，为了让我的新列标题显示出来，我需要先清除表中显示的列，然后在超时后将它们正确设置回来。也许它不起作用，因为属性名称保持不变（即“id”）并且只有标题发生了变化。

有谁知道更好的方法来让它正确更新？

我无法找到有关如何合并 mat-table 中的列单元格的答案。在使用when. 所以想知道我是否可以在这里找到答案。

我有这个JSON数据：

{
    "id": 4,
    "description": "this is another block",
    "block_size": 3480,
    "lot_count": 5,
    "lots": [
        {
            "id": 17,
            "lot_name": "test 17",
            "status": "SOLD",
            "block_id": 4,
            "lot_id": 1,
            "lot_size": 828
        },
        {
            "id": 18,
            "lot_name": "test 18",
            "status": "OPEN",
            "block_id": 4,
            "lot_id": 2,
            "lot_size": 885
        },
        {
            "id": 19,
            "lot_name": "test 19",
            "status": "SOLD",
            "block_id": 4,
            "lot_id": 3,
            "lot_size": 648
        },
        {
            "id": 20,
            "lot_name": "test 20",
            "status": "OPEN",
            "block_id": 4,
            "lot_id": 4, …

在我的模板中，

...
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
...

在我的模板样式中，我有

...
.mat-column-name {
  color: red;
  // flex: 0 1 200px !important; // not getting applied
  max-width: 200px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
...

我想控制列宽。但是当在 中使用flex属性时mat-column-name，它不会被应用。作为一种解决方法，我正在使用max-width. 它有点工作，但我不明白如何max-width习惯使其响应

编辑：工作代码Stackblitz 演示

我正在使用带有可扩展行的材料表

我想在行单击时展开多行。默认行为是在单击新行时关闭先前展开的行。我不想关闭前面的那些，每个都应该保持打开状态，直到再次单击。我怎样才能做到这一点？

我在带有粘性标题的角度材料表上分叉了示例，并添加了更多数据。我看到标题不粘。在这里堆叠闪电战

任何人都知道标题如何保持粘性？

我正在使用 Angular 9.0.4 和 @angular/material 9.1.3，我想显示一个基本的材料表：

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

  <!-- code -->
  <ng-container matColumnDef="code">
    <th mat-header-cell *matHeaderCellDef>Code</th>
    <td mat-cell *matCellDef="let element"> {{ element.code }} </td>
  </ng-container>
</table>

我在 app.module.ts 中导入了这个：

import { MatTableModule } from '@angular/material/table';

@NgModule({
  imports: [
    MatTableModule,
  ],
})

在我的 component.ts 中：

export class DevizaListComponent implements OnInit {
  devizas: DevizaInterface[] = [
    {
      name: 'dollar',
      code: 'USD' ,
    } …

我正在尝试使用 Angular Material Table（如链接）创建一个带有子列的 mat 表。有没有办法用角材料表做到这一点？我可以从其中一列创建子列吗？请检查以下链接中的表格

https://datatables.net/examples/basic_init/complex_header.html