使用角材料创建动态矩阵表(如数学矩阵) [英] create dynamic mat-table like math matrix with angular material
问题描述
我在创建表时遇到一个问题.我的结构数据是动态的,这意味着行数和列数是可变的,例如矩阵m*n
.您可以在此处上找到该结构.
I have one problem on create table. My struct data is dynamic,that means number of row and column is variable like matrix m*n
. and struct is available on here.
我想在 mat-table 上显示json (above photo)
.但是我无法正确分配数据到表,并且在mat-的所有行上都显示了table.show column0
上的重复数据.桌子.
I want to show json (above photo)
to mat-table.but I can't correctly assign data to table and it show Duplicate data on table.show column0
for all rows of mat-table.
而表中的正确数据应为
while Correct data in table should be
我的代码可在 stackblitz 上获得.
在此代码中,我要创建具有5
col和6
行的表.
in this code,i want create table with 5
col and 6
row.
我该如何解决并显示此表中的所有数据?
推荐答案
当您拥有矩阵时,您将拥有FormArrays的FormArray,例如.如果您有类似
when you has a matrix you has a FormArray of FormArrays,e.g. If you has a data like
export const data=[['uno','one'],['dos','two'],['tres','three']]
您可以像(**)一样格式化FormArray的formArray
You can format a formArray of FormArray like (**)
myformArray = new FormArray(
data.map(row=>new FormArray(
row.map(x=>new FormControl(x))
)))
使用mat表时,您需要一个"displayedColumns",这是一个包含要显示的列的数组.如果您希望有一个删除"按钮,则可以使用更多其他变量
When you use a mat table you need a 'displayedColumns', an array with the columns you want display. If you want has a button "delete", you can use another variable more
displayedHeads: string[] = data[0].map((x,index)=>'col'+index);
displayedColumns: string[] = this.displayedHeads.concat('delete')
好了,快要准备好了,我添加了更多新变量来指示您拥有的列数-这允许我们添加新行-以及使用viewChild的表
Well, It's close to be ready, I added a new variable more that indicate the number of columns you has -this allow us add a new row-, and the table using viewChild
columns: number = data[0].length;
@ViewChild(MatTable, { static: true }) table: MatTable<any>;
我们的表已经准备好显示:
Our table it's ready to show it:
<button mat-button (click)="add()">Add row</button>
<table mat-table [dataSource]="myformArray.controls" class="mat-elevation-z8">
<!-- Name Column -->
<ng-container *ngFor="let head of displayedHeads;let j=index" [matColumnDef]="head">
<th mat-header-cell *matHeaderCellDef> {{head}} </th>
<td mat-cell *matCellDef="let element">
<input [formControl]="element.at(j)">
</td>
</ng-container>
<ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let element;let i=index;">
<button mat-button (click)="delete(i)">delete</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
看到dataSource是myformArray.controls
并且在输入中是[formControl]="element.at(j)
,是的"element是内部formArray"
See that the dataSource is myformArray.controls
and in the input is [formControl]="element.at(j)
, yes "element is the inner formArray"
您可以在 stackblitz中查看示例(*)
我添加了两个添加和删除行的功能
I add two functions to add and remove row
delete(index: number) {
this.myformArray.removeAt(index);
this.table.renderRows()
}
add() {
const empty = [];
for (let i = 0; i < this.columns; i++)
empty.push(true)
this.myformArray.push(
new FormArray(empty.map(x => new FormControl('')))
)
this.table.renderRows()
}
(*)在stackblitz中,我添加了一条指令,允许使用箭头键在单元格之间移动
(*) In the stackblitz I added a directive to allow move across cells using arrows keys
(**)您的情况是将Array格式设置为
(**) In your case you format the form Array as
myformArray = new FormArray(
data.map(row=>new FormArray(
row.map(x=>new FormControl(x.c))
)))
这篇关于使用角材料创建动态矩阵表(如数学矩阵)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!