Question

我正在显示Angular中的调查结果，并且正在努力操纵数据结构以及如何在表格的每一列上执行数学运算。

将在数据库中收集对同一调查的大量回复，下面的代码用于以表格形式向调查管理员显示所有回复的摘要。

调查中的每个问题都有三个答案：

课程评分（1 - 10：数字）
教练评级（1 - 10：数字）
评论（字符串）

下面是如何构造这个对象数组的示例。

[ <- Whole survey response
  [  <- Question 1
     {
       question: "Introduction to Angular 4"
     },
     {
       answer : 7
     },
     {
       answer : 6
     },
     {
       answer : 'Good lesson!'
     }
   ],
   [  <- Question 2
     {
       question: "Structure of an Angular 4 Application"
     },
     {
       answer : 5
     },
     {
       answer : 2
     },
     {
       answer : 'Instructor went too quickly!'
     }
   ]
 ]

我目前正在使用此表格输出：

<ng-container *ngFor="let result of results; let rNumber = index;">
  <table>
    <tr *ngFor="let answer of result; let qNumber = index;">
        <td *ngFor="let singleanswer of answer" style="border: 1px solid #333">
            {{singleanswer.answer}}
        </td>
      </tr>
      <hr>
  </table>
</ng-container>

这给了我一个表，其中包含数据库中每个响应的所有答案：

7 6好教训！

5 2导师过得太快了！

我需要能够使用所有问题1响应填充表格，然后输出另一个包含所有问题2响应的表格。

此外，我需要在底部创建一个额外的行，其中包含数值的平均值。

==编辑== Codepen在这里可用：https://codepen.io/Taylorsuk/pen/NvzwaP（codepen似乎很脆弱 - 从here分叉）

Answer 1

我不会尝试使用您的那个模型以不同的格式显示。而是在填充初始模型之后，创建与其他子视图匹配的新模型。

假设表1按问题编号分组，请在此之后执行以下操作。设置结果以创建按问题分组的答案列表：

this.resultsGroupedByQuestions: { title: string, answers: [] } = [];

for (let res of this.results) {
   for (let i = 0, il = res.length; i < il; i++) {
      // if you know the number of questions then simplify this
      let question = this.resultsGroupedByQuestions[i];
      if (!question) {
          this.resultsGroupedByQuestions[i] = question = { 
              title: '', answers: [] 
          };
      }
      if (res[i].question) question.title = res[i].question;
      if (res[i].answer) queue.answer = res[i].answer;
   }
}

使用此功能为您的ui显示结果：

<ng-container *ngFor="let question of resultsGroupedByQuestions; let qIndex = index">
  <strong>{{qIndex}}: {{question.title}}</strong>
  <ul>
    <li *ngFor="let answer of question.answers">
      {{answer}}
    </li>
  </ul>
<ng-container>

再次生成平均值，在得到结果后计算它们。 Array.reduce()适用于创建聚合函数。

// I'm assuming you'll know what questions have numeric results
const numericQuestionIndexes = [0,1]

this.means = numericQuestionIndexes.map(index => {
    this.results.reduce((p, c) => p + (c[index].answer || 0), 0) / this.results.length;
});

在你的底行，只需做这样的事情：

<tr>
  <td>Averages:</td>
  <td>{{means[0] | percent:'1-1'}}</td>
  <td>{{means[1] | percent:'1-1'}}</td>
  <td></td>
</tr>

对嵌套数组值执行数学运算并显示在表

1 个答案: