I need assistance creating a table with dynamically generated columns and using the PrimeNg library for the grid.
Despite asking several questions, I have not received any responses. Can someone please help me achieve this?
To generate table column headers, I utilized *ngFor in combination with an array of row data and another array for column names.
Below is an example of my row data array that contains one row:
uersSurveyAnswers: any = [
{
userEmail: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51303c30233011363c30383d7f323e3c">[email protected]</a>',
qustns: [
{
qNo: 1,
ansrs: ['1']
},
{
qNo: 2,
ansrs: ['1', '0', '1', '1']
},
{
qNo: 5,
ansrs: ['2']
},
{
qNo: 6,
ansrs: ['0', '1', '1', '0']
}
]
}];
The mapping between columns and data should be as follows:
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]
Here is the HTML code snippet:
And here is the columns array:
columns = [ ... ]; // The columns array content goes here This array of columns is dynamically generated.
The challenge I am facing lies within the second 'ng-template' tag which contains 'let-surveyAnswer', representing the row data.
If I create a column with:
<td>{{surveyAnswer.qustns[0].ansrs[0]}}</td>It correctly displays the row data. However, using *ngFor like this:
<td *ngFor="let col of columns">
{{col.field}}
</td>Where 'col.field' contains the data such as 'qustns[0].ansrs[0],' poses a challenge.
I ideally want to achieve something similar to:
<td *ngFor="let col of columns">
{{surveyAnswer.col.field}}
</td>For further clarification, you can access the Stackblitz URL here.
Please provide guidance on how to address this issue. Thank you!