Angular > 在材质表中显示列和行

Posted 2023-02-26

【中文标题】Angular > 在材质表中显示列和行

【英文标题】：Angular > display columns and rows in Material table

【发布时间】：2021-09-18 00:16:57

【问题描述】：

在 Angular 中，我希望你使用带有可扩展行的 Material 表。

table-tree.html

<table
  mat-table
  [dataSource]="dataSource"
  multiTemplateDataRows
  class="mat-elevation-z8"
>
  <ng-container matColumnDef="column" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef>column</th>
    <td mat-cell *matCellDef="let element">
      <tr>element.creationDate</tr>
      <tr>element.requestId</tr>
    </td>
  </ng-container>

  <ng-container matColumnDef="expandedDetail">
    <td
      mat-cell
      *matCellDef="let element"
      [attr.colspan]="columnsToDisplay.length"
    >
      <div
        class="example-element-detail"
        [@detailExpand]="element == expandedInfo ? 'expanded' : 'collapsed'"
      >
        <div class="example-element-position">element.creationDate</div>
        <div class="example-element-description">
          element.serialNumberProductRefToSupply
        </div>
        <div class="example-element-description">
          element.serialNumberOriginSupplyToDestination
        </div>
      </div>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr
    mat-row
    *matRowDef="let element; columns: columnsToDisplay;"
    class="example-element-row"
    [class.example-expanded-row]="expandedInfo === element"
    (click)="expandedInfo = element"
  ></tr>
  <tr
    mat-row
    *matRowDef="let row; columns: ['expandedDetail']"
    class="example-detail-row"
  ></tr>
</table>

table-tree.ts

import  Component  from '@angular/core';
import 
  animate,
  state,
  style,
  transition,
  trigger
 from '@angular/animations';

@Component(
  selector: 'table-tree',
  styleUrls: ['table-tree.css'],
  templateUrl: 'table-tree.html',
  animations: [
    trigger('detailExpand', [
      state(
        'collapsed',
        style( height: '0px', minHeight: '0', display: 'none' )
      ),
      state('expanded', style( height: '*' )),
      transition(
        'expanded <=> collapsed',
        animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')
      )
    ])
  ]
)
export class TableTree 
  dataSource = MoveOrderData;
  columnsToDisplay = [
    'Creation Date',
    'Request ID',
    'Issue',
    'Request Type',
    'Managed by',
    'Product ref to supply',
    'Origin supply to Destination'
  ];
  
  rowsToDisplay = [
    'creationDate',
    'requestId',
    'issue',
    'requestType',
    'managedBy',
    'serialNumberProductRefToSupply',
    'serialNumberOriginSupplyToDestination'
  ];
  expandedInfo: MoveOrderAuthorizations;


export interface MoveOrderAuthorizations 
  creationDate: string;
  requestId: number;
  issue: string;
  requestType: string;
  managedBy: string;
  serialNumberProductRefToSupply: string;
  serialNumberOriginSupplyToDestination: string;


const MoveOrderData: MoveOrderAuthorizations[] = [
  
    creationDate: `01/01/2021`,
    requestId: 139322,
    issue: ``,
    requestType: `Evacuation`,
    managedBy: `AGV`,
    serialNumberProductRefToSupply: `ML132345XO1211321AND11432001`,
    serialNumberOriginSupplyToDestination: `SA-11EOL-LN001`
  ,
  
    creationDate: `01/01/2021`,
    requestId: 139323,
    issue: `Destination not found`,
    requestType: `Supply`,
    managedBy: `AGV`,
    serialNumberProductRefToSupply: `ML132345XO1211321AND11432002`,
    serialNumberOriginSupplyToDestination: `RE-11WIP-11E03`
  
];

在table-tree.ts中，有2个数组，列名和行信息。

  columnsToDisplay = [
    'Creation Date',
    'Request ID',
    'Issue',
    'Request Type',
    'Managed by',
    'Product ref to supply',
    'Origin supply to Destination'
  ];

rowsToDisplay = [
    'creationDate',
    'requestId',
    'issue',
    'requestType',
    'managedBy',
    'serialNumberProductRefToSupply',
    'serialNumberOriginSupplyToDestination'
  ];

第一个数组用于显示列名，它可以工作。但我无法在每一列中显示信息。所有信息都在同一个。我已经接近成功，但我看不出我的代码有什么问题。 你可以去 Stackblitz 上看看表>https://stackblitz.com/edit/tab-tree?file=main.ts

谢谢:)

【问题讨论】：

您看到相同数据重复的原因是这些行

element.creationDate element.requestId。您为两个属性提供相同的数据，但未根据列显示。我不知道您是否真的需要在这里定义行 - 它看起来与列定义相同。这篇文章对你有帮助：***.com/questions/49868019/…

感谢 Usalin 的链接，它真的很有帮助

【参考方案1】：

我认为您想将数据源字段名称用作列名称。我会将rowsToDisplay 重命名为columnsToDisplay，然后创建一个columnNames 对象：

  columnsToDisplay = [
    'creationDate',
    'requestId',
    'issue',
    'requestType',
    'managedBy',
    'serialNumberProductRefToSupply',
    'serialNumberOriginSupplyToDestination'
  ];

  columnNames = 
    creationDate: 'Creation Date',
    requestId: 'Request ID',
    issue: 'Issue',
    requestType: 'Request Type',
    managedBy: 'Managed by',
    serialNumberProductRefToSupply: 'Product ref to supply',
    serialNumberOriginSupplyToDestination: 'Origin supply to Destination'
  ;

然后在您的模板中更新以使用 columnsToDisplay 数组从您的数据源中提取正确的值：

  <ng-container matColumnDef="column" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef>columnNames[column]</th>
    <td mat-cell *matCellDef="let element">
      element[column]
    </td>
  </ng-container>

https://stackblitz.com/edit/tab-tree-muxipv?file=app%2Ftable-tree.html

【讨论】：

一如既往的简单 :) 谢谢 RobbieAreBest