ネストされた配列の値を計算してテーブルに表示する

Question

アンケートの結果を表示して、データ構造を操作したり、テーブルの各列で数値を計算したりするのに苦労します。

同じ調査に対する多数の回答がデータベースに収集され、以下のコードを使用して、すべての回答の一覧を表形式で調査管理者に表示します。 （ - ：数10 1）インストラクターの

評価（1から10：数）

コメント（文字列）

レッスンの

1. 評価：

   アンケート内の各質問には、3つの答えを持っています

このオブジェクトの配列がどのように構成されているかの例は以下のとおりです。

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

私は現在使用してテーブルにこれを出力してい

この：

7 6良い教訓：私は、データベース内の各応答のためのすべての答えを含むテーブルを与える

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

！

5 2講師が早すぎました！

すべての質問1の回答をテーブルに入力してから、すべての質問2の回答を含む別のテーブルを出力する必要があります。

さらに、数値の平均を使って下部に行を追加する必要があります。

==編集==ここで入手可能 Codepen：https://codepen.io/Taylorsuk/pen/NvzwaP（codepenがフレーク状らしい - hereからフォーク）

Answer 1

私は異なる形式で表示するように、1つのモデルを使用しようとしないでしょう。代わりに、最初のモデルを作成した後、他のサブビューに一致する新しいモデルを作成します。表1と仮定すると

はthis.resultsは、質問によってグループ化された回答のリストを作成するために設定された後、以下を実行し、質問番号によってグループ化されています

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>