angular - 在 mat-table 中添加新行时出现错误
问题描述
我想用一个按钮在 mat-table 中插入一个新行。我写了一个函数,当我点击它时会插入一个新行,但我收到错误CalculatoryBookingsComponent.html:62 ERROR Error: Cannot find control with path: 'rows -> 0'
,只显示前 5 个单元格。你知道它是什么以及如何修复错误吗?
我的工作:https ://stackblitz.com/edit/angular-l9x7ac?file=app%2Ftable-basic-example.html
代码:
// HTML
<button class="crud-status" type="submit" mat-raised-button (click)="addRow()">add</button>
<td mat-cell *matCellDef="let row; let i = index;">
<div formArrayName="rows" *ngIf="attributesWithFormControls.includes(column.attribute); else otherColumns"> // Line 62: This is the area where the error code points to
<span class="edit-cell" [formGroupName]="i">
<mat-form-field>
<label>
<input matInput type="text" [formControlName]="column.attribute">
</label>
</mat-form-field>
</span>
</div>
<ng-template #otherColumns>
{{ column.object !== null ? row[column.object][column.attribute] : row[column.attribute] }}
</ng-template>
</td>
// TS
// ********** DATA TABLE ARRAYS **********//
private beforeMonthsColumns: EditColumns[] = [
{ attribute: 'name', name: 'Erlöse / Kostenarten', object: null, disabledRanges: false, disabledAssignment: false },
{ attribute: 'kagNumber', name: 'KAG', object: null, disabledRanges: false, disabledAssignment: false }
];
private monthColumns: EditColumns[] = [
{ attribute: '1', name: 'Jan', object: 'values', disabledRanges: false, disabledAssignment: false },
{ attribute: '2', name: 'Feb', object: 'values', disabledRanges: false, disabledAssignment: false },
{ attribute: '3', name: 'Mrz', object: 'values', disabledRanges: false, disabledAssignment: false }
];
private afterMonthsColumns: EditColumns[] = [
{ attribute: 'note', name: 'Anmerkung', object: null, disabledRanges: false, disabledAssignment: false },
{ attribute: 'assignment', name: 'zugeordnet? KAG', object: null, disabledRanges: false, disabledAssignment: true }
];
// Merged arrays
public displayedColumns: EditColumns[] = [
...this.beforeMonthsColumns,
...this.monthColumns,
...this.afterMonthsColumns
];
addRow() {
this.dataSource.data.push(this.columns[this.index++])
this.table.renderRows()
}
const formRowsData = [];
const nameFormArray = this.calcBookingsForm.get('rows') as FormArray;
// build form array values for text fields in data table rows
for (const formRowDataEntry of formRowsData) {
const consolidatedValues = {};
// Combine rows values into one object
for (const d of formRowDataEntry) {
consolidatedValues[d.attr] = d.value;
}
// bind values of one row to a form control group
const rowGroup = this.formBuilder.group(consolidatedValues);
nameFormArray.push(rowGroup);
rowGroup.valueChanges.subscribe((rowData) => {
console.log('Row data changed:', rowData);
});
}
this.dataSource.data = rows;
解决方案
您应该将 FormArray 值与表 DataSource 中的数组同步:
ngOnInit() {
...
this.myForm = this.formBuilder.group({
rows: this.formBuilder.array([this.initItemRows()])
});
this.dataSource.data = this.myForm.get('rows').value;
}
addRow() {
const newItem = this.initItemRows();
this.formArr.push(newItem);
this.dataSource.data = this.dataSource.data.concat(newItem.value);
}
推荐阅读
- python - 是否可以使用 Python 每隔 1 分钟向 excel 中注入一个数字?
- android - Android 更改 TabItem 未选中的颜色
- python - 为什么在我的父类中定义 `__init_subclass__` 时看不到我的子类?
- c++ - 为什么只移动对象不能添加显式关键字?
- javascript - 如何使用 PHP 上传使用 MediaRecorder API 录制的视频?
- python - 我正在使用 Excel VBA 开发和更新 COM 组件服务器,如何确保使用更新版本?
- javascript - 使用JS为浏览器创建文件
- pip - 为什么 pip3.6 install 命令抛出错误?
- corda - Corda 节点是否仅向参与者节点或网络/区域的所有节点发送消息(状态更改/健康检查)?
- angular - nvd3 多条形图 x 轴标签在鼠标悬停时显示省略号和全文作为工具提示