Question

我正在尝试将列添加到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

Answer 1

尝试从中更改第27行：

<mat-header-cell *cdkHeaderCellDef>{{ displayedColumns }}</mat-header-cell>

收件人：

<mat-header-cell *cdkHeaderCellDef>{{ column }}</mat-header-cell>

Answer 2

看到所有值出现的原因是因为您在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>

现在，我们遍历每个单独的项目，而不是每次都显示整个数组。

如何在Mat Table-Angular中添加列？

2 个答案: