角度>在材料表中显示列和行

Question

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

表格树.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>

表树.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`
}
];

在表树.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'
];

第一个数组用于显示列名称，它可以正常工作。但我不能在每一列中显示信息。所有信息都是相同的。我已经接近成功，但我看不出我的代码出了什么问题。您可以在Stacklitz上查看表格>https://stackblitz.com/edit/tab-tree?file=main.ts

谢谢：(

Answer 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