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

【问题标题】：How to add a column into Mat Table - Angular?如何在 Mat Table 中添加一列 - Angular？
【发布时间】：2019-08-23 17:46:14
【问题描述】：

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

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

尝试从这里更改第 27 行：

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

收件人：

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

【讨论】：

是的，它正在工作！

【解决方案2】：

您看到所有值都显示的原因是因为您在 displayColumns 中显示所有值：

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

在您的 ng-container 中，您正在使用 ngFor 循环数据：

<ng-container *ngFor="let column of displayedColumns" [cdkColumnDef]="column">

因此，您需要更改 mat-header-cell 以获取每个单独的项目，在本例中为“列”。您的 mat-header-cell 应如下所示：

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

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

【讨论】：