angular - 使用角材料创建动态垫表,如数学矩阵
问题描述
我在创建表时遇到了一个问题。我的结构数据是动态的,这意味着行数和列数像矩阵一样是可变的m*n
。struct 在这里可用。
我想向json (above photo)
mat -table显示。但我无法正确地将数据分配给 table,并且它在 table.show 上column0
为 mat-table 的所有行显示重复数据。
我的代码在stackblitz上可用。
在这段代码中,我想用5
col 和6
row 创建表。
我该如何解决它并显示此表中的所有数据?
解决方案
当你有一个矩阵时,你有一个 FormArrays 的 FormArray,例如,如果你有一个像这样的数据
export const data=[['uno','one'],['dos','two'],['tres','three']]
您可以格式化 FormArray 的 FormArray,例如 (**)
myformArray = new FormArray(
data.map(row=>new FormArray(
row.map(x=>new FormControl(x))
)))
当您使用 mat 表时,您需要一个“displayedColumns”,一个包含您要显示的列的数组。如果你想要一个按钮“删除”,你可以使用另一个变量更多
displayedHeads: string[] = data[0].map((x,index)=>'col'+index);
displayedColumns: string[] = this.displayedHeads.concat('delete')
好吧,快准备好了,我添加了一个新变量 more 来指示您拥有的列数 - 这允许我们添加新行 - 以及使用 viewChild 的表
columns: number = data[0].length;
@ViewChild(MatTable, { static: true }) table: MatTable<any>;
我们的桌子已经准备好展示了:
<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>
看到数据源是myformArray.controls
,输入是[formControl]="element.at(j)
,是的“元素是内部formArray”
您可以在stackblitz (*)中查看示例
我添加了两个函数来添加和删除行
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 中,我添加了一个指令以允许使用箭头键跨单元格移动
(**) 在您的情况下,您将表单格式设置为
myformArray = new FormArray(
data.map(row=>new FormArray(
row.map(x=>new FormControl(x.c))
)))
推荐阅读
- jhipster - 有没有办法在重新生成实体时不覆盖对实体所做的修改?
- java - Java 8 - 从具有嵌套列表的对象列表中收集到地图中
- spring - resttemplate GET 将一个集合包装在一个附加标签中
- python - 如何获得只有上对角线元素的零矩阵?(上对角线元素已知)
- python - OpenAI 健身房渲染 OSError
- sql - 如何使用 SQL 从 2 个表中获取百分比
- rdf - 在 Linux 上将图形加载到 graphDB 后如何找到丢失的三元组?
- google-analytics-api - 选择正确的 Google Analytics API 指标
- swift - 如何删除 Firestore 字典值?
- google-sheets - 如何在 Google 表格中使用变量范围?