带有 *ngFor 问题的 ng-template 在 angular 8 [英] ng-template with *ngFor issue in angular 8
问题描述
我想用动态生成的列创建一个表.我为网格使用了 PrimeNg 库.
I want to create a table with dynamically generated columns. I used PrimeNg library for the grid.
我打开了很多问题,但没有人回复我,请帮我做这个.
I opened many questions,but no one replied me,please help me to do this.
我使用 *ngFor 生成表格列标题
I used with *ngFor to generate table column headers
有 2 个数组.一个用于行数据,一个用于列名称.
There are 2 arays. one for the row data and one for columns names.
这是我的行数据数组.其中包含一行
Here is my row data array.which contains one row
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']
}
]
}];
数据列应该在明智的情况下加载
Columns to data should be load below wise
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'
}]
这个数组是动态生成的.
this array is generated by dynamically.
现在我的问题是,在我的第二个ng-template"标签内包含 let-surveyAnswer,其中包含行数据.
Now my problem is, inside my second 'ng-template' tag contains let-surveyAnswer which contains the row data.
如果我用
<td>{{surveyAnswer.qustns[0].ansrs[0]}}</td>
然后显示行数据
但我无法理解如何在 html 中执行此操作,如下所示
but I can't understand how to do this in html like below
<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
Here is Stackblitz url https://stackblitz.com/edit/angular-ggvf31
请告诉我怎么做.
推荐答案
问题出在您的 ngOnInit()
方法中.您正在尝试像这样设置字段值:
The problem is in your ngOnInit()
method. You are trying to set the field values like this:
{
field: 'qustns[0].ansrs[0]',
header: 'Q1.1',
}
但这意味着您将 field
设置为字符串 'qustns[0].ansrs[0]'
,当您真正想要该值时.将它们更改为:
But that means you are setting field
to the string 'qustns[0].ansrs[0]'
, when you actually want the value. Change them to be like:
{
field: this.uersSurveyAnswers[0].qustns[0].ansrs[0],
header: 'Q1.1',
}
这篇关于带有 *ngFor 问题的 ng-template 在 angular 8的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!