Как добавить столбец в Mat Table - Angular?

Question

Я пытаюсь добавить столбец в таблицу соответствия, но столбец добавляется с несколькими именами

ФАЙЛ 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 FILE

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() {}
}

Я хочу добавить столбец в таблицу матов, я написал некоторую базовую логику, но всякий раз, когда я добавлял столбец, столбецимя получить несколько имен Вот это моя ссылка 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, чтобы взять каждый отдельный элемент, в данном случае 'column'. Ваша ячейка mat-header должна выглядеть следующим образом:

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

Теперь мы перебираем каждый отдельный элемент, вместо того чтобы каждый раз отображать весь массив.