angular - core.js:6014 错误类型错误:无法读取未定义的属性“模板”
问题描述
在查看了对类似错误的响应后,我可以看到该错误与使用 * matHeaderCellDef 有关。我正在编写的代码是结合了很多不同的功能。我有一个表,它结合了动态数据以及我想在表单组中组合的表单元素。任何帮助,将不胜感激。
我的代码如下。
<form [formGroup]="userTable">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> Sr. No. </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>
<ng-container matColumnDef="category">
<th mat-header-cell *matHeaderCellDef> Category </th>
<td mat-cell *matCellDef="let element"> {{element.category}} </td>
</ng-container>
<ng-container matColumnDef="points">
<th mat-header-cell *matHeaderCellDef> Points </th>
<td mat-cell *matCellDef="let element"> {{element.points}} </td>
</ng-container>
<ng-container matColumnDef="w1" formArrayName="tableRows" *ngFor="let group of getFormControls.controls ; let i=index">
<th mat-header-cell *matHeaderCellDef>Week 1</th>
<!--<td mat-cell *matCellDef="let element;">{{element.w1}}</td>-->
<td *ngIf="group.get('isEditable').value" [formGroupName]="i">
<mat-form-field>
<input matInput type="text" formControlName="patent">
</mat-form-field>
</td>
<td *ngIf="group.get('isEditable').value" [formGroupName]="i">
<mat-form-field>
<input matInput type="text" formControlName="collective_actions">
</mat-form-field>
</td>
</ng-container>
<ng-container matColumnDef="header-row-first-group">
<th mat-header-cell *matHeaderCellDef
[style.text-align]="center"
[attr.colspan]="3">
First group
</th>
</ng-container>
<ng-container matColumnDef="header-row-second-group">
<th mat-header-cell *matHeaderCellDef [attr.colspan]="2"> Second group </th>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['header-row-first-group', 'header-row-second-group']"></tr>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
以下是我的 TS 文件:
export class PsdGamificationComponent implements OnInit {
dataSource:MatTableDataSource<categories>;
public displayedColumns: string[] = ['id','category', 'points', 'w1'];
userTable: FormGroup;
control: FormArray;
mode: boolean;
touchedRows: any;
constructor(private fb: FormBuilder) { }
ngOnInit()
{
this.dataSource = new MatTableDataSource<categories>(column_data);
this.touchedRows = [];
this.userTable = this.fb.group({
tableRows: this.fb.array([])
});
this.addRow();
}
ngAfterOnInit() {
this.control = this.userTable.get('tableRows') as FormArray;
}
initiateForm(): FormGroup {
return this.fb.group({
patent: ['', Validators.required],
collective_actions: ['', Validators.required],
standardization: ['', [Validators.required]],
automation: ['', [Validators.required]],
certification: ['', [Validators.required]],
customer_appreciation: ['', [Validators.required]],
csr_external: ['', [Validators.required]],
csr_internal: ['', [Validators.required]],
alm_updates: ['', [Validators.required]],
delivery_commitment: ['', [Validators.required]],
trt: ['', [Validators.required]],
kt_external: ['', [Validators.required]],
kt_internal: ['', [Validators.required]],
inc_pbi: ['', [Validators.required]],
learning_hours: ['', [Validators.required]],
crqs: ['', [Validators.required]],
wos: ['', [Validators.required]],
standup: ['', [Validators.required]],
timesheet: ['', [Validators.required]],
ms_teams: ['', [Validators.required]],
isEditable: [true]
});
}
该代码可在 StackBlitz 上获得。https://stackblitz.com/edit/angular-ivy-xhtgrz
解决方案
*matCellDef
该错误是由于缺少<td>
推荐阅读
- ffmpeg - 错误:成员访问不完整类型“AVFormatInternal”
- python - ValueError:当我尝试执行 fit_generator() 时,无法将输入数组从形状 (97,2048) 广播到形状 (97)
- r - 如何在 R 中下载“Afinn”和“NRC”词典?
- html - 在 angularjs 的选择选项中设置值
- vue.js - 在正在观看 vuex 状态的观察者中切换 GSAP 动画的问题
- azure-devops - Azure DevOps:由 git commit 触发的错误管道
- c++ - 如果使用 /MTd,则在 boost::interprocess::shared_memory_object 中崩溃
- c - 以下代码段的输出是什么?为什么?
- javascript - 调用 Map 对象的 Array 键
- datetime - AbbreviatedMonthNames 在 .NET Core 3.1 中无法正常工作