我目前在Angular项目中使用一个软件包，其中包含我为该项目开发的可重用组件。如何使材质表上的列标题/行动态化，以便在使用Angular项目中的表时可以将它们简单地作为输入数组传递？
其中一些标头堆叠在一起或具有独特的HTML / CSS，这正是我遇到的问题。我试过在组件内部创建一个具有布尔标志的数组，该标志指示列标题/行是否应容纳两个彼此堆叠的字段。
下面是我当前的HTML的动态摘录。您会看到两个ng容器都不同。我该怎么写，这样当我在项目中使用表时，可以简单地将列/行数组作为输入？
<ng-container matColumnDef="from">
<th mat-header-cell *matHeaderCellDef>
<div [ngStyle] = "{'color': pickupHeader}" class = "stackedColumn">
<span (click)="toggleDates($event)">{{ 'shipperFrom' }}</span>
</div>
<div [ngStyle] = "{'color': deliveryHeader}" class = "stackedColumn">
<span (click) = "toggleDates($event)">{{ 'shipperTo' }}</span>
</div>
</th>
<td mat-cell *matCellDef="let element">
<div>
<span class = "location"> <img src="{{ element.Flag }}">{{element.PickupCity}}</span>
</div>
<div>
<span class = "location"><img src="{{ element.Flag }}">{{element.DeliveryCity}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="legs">
<th mat-header-cell *matHeaderCellDef> {{ somethingElse }} </th>
<td mat-cell *matCellDef="let element"> {{element.SomethingElse}} </td>
</ng-container>
基本上，我想在我的component.ts中执行以下操作：
data = [{},{},{},{}]
并且我希望该对象数组可以填充表，并知道应使用哪种HTML，以便在导入并将其在项目中使用时，这就是我所需要的：
<the-table [dataSource] = "data"></the-table>
基本上，我希望能够快速向表中添加列/行，而不必返回并编辑程序包。
答案 0 :(得分：0)
我做了类似的事情。请记住，我将以下内容弄得一团糟，以去除一些项目特定的详细信息，所以请告诉我是否有问题。
component.html：
<mat-table matSort [dataSource]="dataSource">
<ng-container *ngFor="let column of displayedColumns; index as i" [matColumnDef]="column">
<mat-header-cell *matHeaderCellDef class="col-search" fxLayoutAlign="start start" fxLayout="column">
<span mat-sort-header>{{ getColumnLabel(column) }}</span>
<!--The below is incomplete Just remove if you don't need filtering-->
<input
matInput
autocomplete="off"
id="{{ column + i }}"
(keyup)="myCustomFilterCode()"
placeholder="Filter"
/>
</mat-header-cell>
<mat-cell *matCellDef="let row">{{ row[column] }}</mat-cell>
</ng-container>
<!--This ngStyle is specifically for fixedWidth tables which are meant to be horizontally scrollable-->
<mat-header-row [ngStyle]="{ 'min-width.px': width ? width : null }" *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row [ngStyle]="{ 'min-width.px': width ? width : null }" *matRowDef="let row; columns: displayedColumns"> </mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="pageSizeOptions" showFirstLastButtons [pageSize]="startingPageSize"></mat-paginator>
component.ts
/**This component will dynamically create a mat-table for a set of data */
@Component({
selector: 'dynamic-mat-table',
templateUrl: './dynamic-mat-table.component.html',
styleUrls: ['./dynamic-mat-table.component.scss'],
providers: [DatePipe]
})
export class DynamicMatTableComponent implements OnInit, OnChanges {
/**The data to generate a table for */
@Input()
tableData: Object[];
/** This will override the column names in the table, the id will be the property name (i.e. propertyID)
* and the value will be the column header text
*
* **This is Only Necessary if you don't like the Automatically created column names**
*/
@Input()
columnLabels: IdValuePair[];
/**List of column property names (i.e. propertyID) to ignore */
@Input()
ignoreColumns: string[];
/**Sets the starting page size for the paginator */
@Input()
startingPageSize: number;
/**Sets the page size options for the paginator */
@Input()
pageSizeOptions: number[];
/**Defaults to false, when true the table will be generated with a width of # of columns * columnWidth,
* otherwise column widths will not be specified (will fill container with equal width columns) */
@Input()
fixedWidth = false;
/**Defaults to 250, Only used when fixedWidth = true if not set this determines the width of each column */
@Input()
columnWidth = 250;
width: number;
dataSource = new MatTableDataSource<Object>();
fullColumnLabels: IdValuePair[] = [];
displayedColumns: string[];
@ViewChild(MatPaginator, { static: true })
paginator: MatPaginator;
@ViewChild(MatSort, { static: true })
sort: MatSort;
constructor(private datePipe: DatePipe) {}
ngOnInit() {}
/**Generate dynamic table whenever inputs change */
ngOnChanges() {
this.initTable();
if (this.tableData && this.tableData.length > 0) {
this.displayedColumns = Object.keys(this.tableData[0]);
this.removeIgnoredColumns();
this.createLabelsForColumns(this.displayedColumns);
this.calculateRowWidth(this.displayedColumns.length);
this.dataSource.data = this.pipeData([...this.tableData]);
}
}
/**Create the labels array for each column */
private createLabelsForColumns(columns: string[]) {
this.fullColumnLabels = this.columnLabels;
if (this.fullColumnLabels === undefined) {
this.fullColumnLabels = [];
}
if (this.tableData && this.tableData.length > 0) {
columns.forEach(x => {
if (!this.fullColumnLabels.some(label => label.id === x)) {
this.fullColumnLabels.push(new IdValuePair(x, _.startCase(x)));
}
});
}
}
/**Remove ignored columns to prevent from being displayed */
private removeIgnoredColumns() {
if (this.ignoreColumns) {
this.displayedColumns = this.displayedColumns.filter(x => !this.ignoreColumns.some(y => y === x));
}
}
/**Calculate the row width by the number of columns */
private calculateRowWidth(columnNumber: number) {
if (this.fixedWidth) {
this.width = columnNumber * this.columnWidth;
}
}
/**Initialize table */
private initTable() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
/**Cleans up data with pipes if necessary*/
private pipeData(data: Object[]): Object[] {
data = this.pipeDates(data);
return data;
}
/**Pipe dates through a date pipe if the property name contains 'date' and the value looks like a date*/
private pipeDates(data: Object[]): Object[] {
// ISO_8601 is what .net core returns, may need to expand this list
const formats = [moment.ISO_8601];
// Loop through each row of data
data.forEach((row, index) => {
// Loop through each property in each row
Object.keys(data[index]).forEach(propertyName => {
// Get the value of the property
const value = data[index][propertyName];
// If the value matches a format in the format list, then transform it to a short date
if (propertyName.toLowerCase().search('date') !== -1 && moment(value, formats, true).isValid()) {
data[index][propertyName] = this.datePipe.transform(value, 'short');
}
});
});
return data;
}
/**Gets the label for a given column from the property name */
getColumnLabel(column: string): string {
return this.fullColumnLabels.find(x => x.id === column).value;
}
}