Question

我想用动态生成的列创建一个表。我将PrimeNg库用于网格。

我打开了很多问题，但是没有人回答我，请帮助我完成这个事情。

我与* ngFor一起使用来生成表列标题

有2个应答。一个用于行数据，一个用于列名称。

这是我的行数据数组。其中包含一行

const Block = () => {
  const ref = useRef();
  useEffect(() => {
    if (!ref.current) {
      return;
    }
    const el = ref.current;
    const {top} = el.parentNode.getBoundingClientRect();
    el.style.top = `${top + border}px`;
  });
  return <div className="block" ref={ref} />;
};

数据列应以明智的方式加载

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']
        }
      ]
    }];

这是我的html代码

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]

这是我的列数组

<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>

此数组是动态生成的。

现在我的问题是，在我的第二个 ng-template 标签中包含 let-surveyAnswer ，其中包含行数据。

如果我使用创建列

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'
}]

然后显示行数据

但我不明白如何在HTML中执行以下操作

<td>{{surveyAnswer.qustns[0].ansrs[0]}}</td>

col.field 包含列数组数据，例如

<td *ngFor="let col of columns">
  {{col.field}}
</td>

我想获取如下数据

qustns[0].ansrs[0]

这是Stackblitz网址https://stackblitz.com/edit/angular-ggvf31

请告诉我该怎么做。

Answer 1

问题出在您的ngOnInit()方法中。您正在尝试像这样设置字段值：

{
  field: 'qustns[0].ansrs[0]',
  header: 'Q1.1',
}

但这意味着您实际需要该值时，正在将field设置为字符串'qustns[0].ansrs[0]'。将它们更改为：

{
  field: this.uersSurveyAnswers[0].qustns[0].ansrs[0],
  header: 'Q1.1',
}

带* ngFor的ng-template在角度8中发布

1 个答案: