Столбцы приращения в таблице угловых материалов - PullRequest
Новая
       1

Столбцы приращения в таблице угловых материалов

0 голосов
/ 09 октября 2019

Я хотел бы иметь возможность увеличивать столбцы при динамическом добавлении в таблицу угловых материалов. Я использую метод добавления столбца, чтобы создать новый столбец из документации материала Angular. https://material.angular.io/components/table/examples

Добавляются столбцы, но мне нужно, чтобы они увеличивались и отображали номер столбца. W

Ответы [ 2 ]

1 голос
/ 10 октября 2019

Когда мы используем таблицу материалов, нам нужно учитывать две вещи:

  1. Источник
  2. Отображаемые столбцы

Как вы хотитесоздать последовательность входных данных, вам нужно связать входные данные с переменными, как насчет использования FormArray?

Что ж, все просто, если мы будем использовать источник данных, такой как 

[
{position: 1, name: 'Hydrogen',
 col0:new FormControl(),col1:new FormControl(),
 weight: 1.0079, symbol: 'H'},
{position: 2, name: 'Helium',
 col0:new FormControl(),col1:new FormControl(),
 weight: 4.0026, symbol: 'He'},
...
]

ВВо-первых, наш массив форм - это массив с таким количеством групп форм, сколько строк имеет таблица. 

formArray=new FormArray(ELEMENT_DATA.map(x=>new FormGroup({})))

Я помогаю мне, используя три массива: ColumnsBefore, ColumnsAfter и ColumnsArray, поэтому отображаемые столбцы становятся похожими на 

this.displayedColumns=this.columnsBefore.map(x=>x.name)
                    .concat(this.columnsArray.map(x=>x.name))
                    .concat(this.columnsAfter.map(x=>x.name))

Когда мы добавляем столбец, нам нужно добавить новый элемент управления для каждого элемента массива, добавить к источнику ссылку на элемент управления create, добавить элемент в ColumnsArray и обновить displayColumns (имя элемента управления будетнапример, col0, col1, ...) 

  addColumn()
  {
    let count=this.columnsArray.length
    this.formArray.controls.forEach((group:FormGroup,index)=>{
         group.addControl("col"+count,new FormControl())
         this.dataSource[index]["col"+count]=this.formArray.at(index).get("col"+count)
    })

    this.columnsArray.push({name:"col"+count,title:"Round "+(count+1)})
    this.displayedColumns=this.columnsBefore.map(x=>x.name)
                        .concat(this.columnsArray.map(x=>x.name))
                        .concat(this.columnsAfter.map(x=>x.name))
  }

Чтобы удалить столбец, нам нужно удалить элемент управления каждого элемента FormArray, удалить элемент columnsArray и обновить displayColumns

  removeColumn()
  {
    let count=this.columnsArray.length-1
    if (count>=0)
    {
      this.columnsArray.pop()
      this.formArray.controls.forEach(group=>
      {
        (group as FormGroup).removeControl("col"+count)
      })
      this.displayedColumns=this.columnsBefore.map(x=>x.name)
                        .concat(this.columnsArray.map(x=>x.name))
                        .concat(this.columnsAfter.map(x=>x.name))
    }
  }

Нет необходимости удалять элемент из источника

.html (смотрите, почему мы используем три массива) 

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container *ngFor="let column of columnsBefore" [matColumnDef]="column.name">
        <th mat-header-cell *matHeaderCellDef>{{column.title}}</th>
        <td mat-cell *matCellDef="let element"> {{element[column.name]}} </td>
    </ng-container>

    <ng-container *ngFor="let column of columnsArray" [matColumnDef]="column.name">
        <th mat-header-cell *matHeaderCellDef>{{column.title}}</th>
        <td mat-cell *matCellDef="let element">
            <input style="width:2rem;margin-rigth:.5rem" [formControl]="element[column.name]"/>
        </td>
    </ng-container>

    <ng-container *ngFor="let column of columnsAfter" [matColumnDef]="column.name">
        <th mat-header-cell *matHeaderCellDef>{{column.title}}</th>
        <td mat-cell *matCellDef="let element"> {{element[column.name]}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

stackblitz

TODO, после создания formArray, подпишитесь на formArray.valueChanges, чтобы поместить итоги в столбцы

0 голосов
/ 09 октября 2019

Используйте index в *ngFor: 

*ngFor="let column of displayedColumns; let i = index;"

, а затем увеличьте его на 1: 

<button mat-raised-button (click)="addColumn()"> Add column </button>
<button mat-raised-button (click)="removeColumn()"> Remove column </button>
<button mat-raised-button (click)="shuffle()"> Shuffle </button>

<table mat-table [dataSource]="data" class="mat-elevation-z8">
  <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns; let i = index;">
    <!-- HERE -->
    <th mat-header-cell *matHeaderCellDef> {{ i + 1 }} {{column}} </th>
    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>


<!-- Copyright 2019 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

Вот Рабочий образец StackBlitz для вашей ссылки.

...