typescript - 带有 *ngFor 的 ng-template 问题在 Angular 8
问题描述
我想创建一个包含动态生成列的表。我将PrimeNg库用于网格。
我打开了很多问题,但没有人回答我,请帮我这样做。
我使用 *ngFor 来生成表格列标题
有2个数组。一个用于行数据,一个用于列名。
这是我的行数据数组。其中包含一行
uersSurveyAnswers: any = [
{
userEmail: 'amara@gmail.com',
qustns: [
{
qNo: 1,
ansrs: ['1']
},
{
qNo: 2,
ansrs: ['1', '0', '1', '1']
},
{
qNo: 5,
ansrs: ['2']
},
{
qNo: 6,
ansrs: ['0', '1', '1', '0']
}
]
}];
数据列应该在下面加载
column Q1.1 - > uersSurveyAnswers -> qustns[0].ansrs[0]
column Q2.1 - > uersSurveyAnswers -> qustns[1].ansrs[0]
column Q2.2 - > uersSurveyAnswers -> qustns[1].ansrs[1]
column Q2.3 - > uersSurveyAnswers -> qustns[1].ansrs[2]
column Q2.4 - > uersSurveyAnswers -> qustns[1].ansrs[3]
column Q5.1 - > uersSurveyAnswers -> qustns[2].ansrs[0]
column Q6.1 - > uersSurveyAnswers -> qustns[3].ansrs[0]
column Q6.2 - > uersSurveyAnswers -> qustns[3].ansrs[1]
column Q6.3 - > uersSurveyAnswers -> qustns[3].ansrs[2]
column Q6.4 - > uersSurveyAnswers -> qustns[3].ansrs[3]
这是我的html代码
<p-table [columns]="columns" [value]="uersSurveyAnswers">
<ng-template pTemplate="header" let-columns>
<tr>
<th>
Respondent Name
</th>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-surveyAnswer let-columns="columns">
<tr>
<td>{{surveyAnswer.userEmail}}</td>
<td>{{surveyAnswer.qustns[0].ansrs[0]}}</td>
<td *ngFor="let col of columns">
{{col.field}}
</td>
</tr>
</ng-template>
</p-table>
这是我的列数组
columns = [
{
field: 'qustns[0].ansrs[0]',
header: 'Q1.1'
},
{
field: 'qustns[1].ansrs[0]',
header: 'Q2.1'
},
{
field: 'qustns[1].ansrs[1]',
header: 'Q2.2'
},
{
field: 'qustns[1].ansrs[2]',
header: 'Q2.3'
}
,
{
field: 'qustns[1].ansrs[3]',
header: 'Q2.4'
}
,
{
field: 'qustns[2].ansrs[0]',
header: 'Q5.1'
}
,
{
field: 'qustns[3].ansrs[0]',
header: 'Q6.1'
}
,
{
field: 'qustns[3].ansrs[1]',
header: 'Q6.2'
}
,
{
field: 'qustns[3].ansrs[2]',
header: 'Q6.3'
}
,
{
field: 'qustns[3].ansrs[3]',
header: 'Q6.4'
}]
这个数组是由动态生成的。
现在我的问题是,在我的第二个“ ng-template ”标签中包含包含行数据的let-surveyAnswer 。
如果我创建列
<td>{{surveyAnswer.qustns[0].ansrs[0]}}</td>
然后它显示行数据
但我不明白如何在 html 中执行此操作,如下所示
<td *ngFor="let col of columns">
{{col.field}}
</td>
col.field包含列数组数据,例如
qustns[0].ansrs[0]
我想得到如下数据
<td *ngFor="let col of columns">
{{surveyAnswer.col.field}}
</td>
这是 Stackblitz 网址https://stackblitz.com/edit/angular-ggvf31
请告诉我如何做到这一点。
解决方案
问题出在你的ngOnInit()
方法上。您正在尝试像这样设置字段值:
{
field: 'qustns[0].ansrs[0]',
header: 'Q1.1',
}
但这意味着您正在设置field
string 'qustns[0].ansrs[0]'
,而您实际上需要该值。将它们更改为:
{
field: this.uersSurveyAnswers[0].qustns[0].ansrs[0],
header: 'Q1.1',
}
推荐阅读
- angular - 将 ELEMENT_DATA: PeriodicElement[] (of mat-table) 移动到 Angular 中的另一个文件
- javascript - 如何将“this”以及 v-model 从输入传递到处理程序
- python - 如果它们在不同的列中,我如何按值分组?
- class - '未声明的标识符'/'标识符“x”未定义'/'class Y没有成员“x”'使用结构类型指针
- c# - 带有 numericupdown 的倒数计时器
- azure-devops - 构建由位于 DevOps 中不同项目中的不同项目组成的解决方案
- javascript - 使用状态数据中的状态值用于 React 应用程序中的顶点图表
- javascript - 对象列表中非常简单的增量函数
- python - 单击条目时如何更改条目的文本
- tensorflow - 自定义指标和损失:AttributeError:“张量”对象在训练期间没有属性“numpy”