我正在尝试将列添加到mat表中,但是列添加了多个名称
HTML文件
<div class="main-content">
<form class="example-form">
<mat-form-field class="example-full-width">
<input
matInput
[(ngModel)]="columnName"
name="columnName"
placeholder="Add Column Here"
/>
</mat-form-field>
<button
mat-button
mat-raised-button
color="primary"
(click)="addColumns()"
>
Add
</button>
<mat-table [dataSource]="columnDataSource">
<ng-container
*ngFor="let column of displayedColumns"
[cdkColumnDef]="column"
>
<mat-header-cell *cdkHeaderCellDef>{{
displayedColumns
}}</mat-header-cell>
<mat-cell *cdkCellDef="let row">{{
displayedColumns
}}</mat-cell>
</ng-container>
<mat-header-row
*matHeaderRowDef="displayedColumns"
></mat-header-row>
<!-- <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> -->
</mat-table>
</form>
</div>
TS文件
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
/**
* @title Basic use of `<table mat-table>`
*/
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample implements OnInit {
displayedColumns = [];
columnDataSource: any = [];
columnName: any;
constructor() {}
addColumns() {
this.displayedColumns.push(this.columnName);
this.columnDataSource = new MatTableDataSource<any>(
this.displayedColumns
);
console.log(this.displayedColumns);
}
ngOnInit() {}
}
我想在mat表中添加一列,我写了一些基本逻辑,但是每当添加列时,列名都会得到多个名称 这是我的stackBlitz链接-> https://stackblitz.com/edit/add-extra-column-mat-tabe?file=app%2Ftable-basic-example.ts
答案 0 :(得分:1)
尝试从中更改第27行:
<mat-header-cell *cdkHeaderCellDef>{{ displayedColumns }}</mat-header-cell>
收件人:
<mat-header-cell *cdkHeaderCellDef>{{ column }}</mat-header-cell>
答案 1 :(得分:0)
看到所有值出现的原因是因为您在displayColumns中显示所有值:
<mat-header-cell *cdkHeaderCellDef>{{displayedColumns}}</mat-header-cell>
在ng容器中,您正在使用ngFor遍历数据:
<ng-container *ngFor="let column of displayedColumns" [cdkColumnDef]="column">
因此,您需要更改Mat-Header单元格以容纳每个单独的项目,在本例中为“列”。您的mat-header-cell应该看起来像这样:
<mat-header-cell *cdkHeaderCellDef>{{column}}</mat-header-cell>
现在,我们遍历每个单独的项目,而不是每次都显示整个数组。