本文介绍了错误:无法读取未定义的属性(正在读取HeaderCell)-在角度材料表中创建反应形式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试创建一个具有反应性形式的角度材质表。我需要添加一些属性,所以我使用的是formArray。但是我的表没有显示任何结果,而ANGLE使我返回相同的错误:
这是我到目前为止得到的:
HTML
<button mat-button mat-raised-button (click)="addParameterWhatsApp()" color="primary">Add</button>
<form [formGroup]="form" autocomplete="off">
<table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8" formGroupName="whatsapp">
<ng-container formArrayName="parameters">
<ng-container *ngFor="let dados of parameters.controls; let i = index ">
<div [formGroupName]="i">
<ng-container matColumnDef="posicao">
<th mat-header-cell *matHeaderCellDef> Posicao </th>
<td mat-cell *matCellDef="let element">
<mat-form-field appearance="outline">
<mat-label>Posicao</mat-label>
<input matInput formControlName="posicao">
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="valor">
<th mat-header-cell *matHeaderCellDef>Valor</th>
<td mat-cell *matCellDef="let element">
<mat-form-field appearance="outline">
<mat-label>Valor</mat-label>
<input matInput formControlName="valor">
</mat-form-field>
</td>
</ng-container>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</form>
TS
form!: FormGroup;
dataSource;
displayedColumns = ['posicao', 'valor'];
constructor(private _formBuilder: FormBuilder) {}
ngOnInit(): void {
this.createForm();
}
createForm() {
this.form = this._formBuilder.group({
whatsapp: this._formBuilder.group({
name: [],
parameters: this.buildArrayParametersWhatsApp(),
}),
});
}
get parameters() {
return this.form.get('whatsapp')?.get('parameters') as FormArray;
}
buildArrayParametersWhatsApp() {
return this._formBuilder.array([]);
}
addParameterWhatsApp() {
const parametersArray = this._formBuilder?.group({
posicao: [],
valor: [],
});
if (parametersArray) {
this.parameters.push(parametersArray);
}
}
图片:
我错过了什么?
推荐答案
我不知道为什么角度显示您不相关错误ERROR TypeError: Cannot read properties of undefined (reading 'headerCell')
。但你的应用程序不工作的原因是你错过了关闭<div [formGroupName]="i">
。您you can see here after this div is closed
这篇关于错误:无法读取未定义的属性(正在读取HeaderCell)-在角度材料表中创建反应形式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!