呈现动态调查 [英] Rendering a dynamic survey

问题描述

对于以下情况，我需要一个意见:

I want an opinion for the following scenario:

我有一个包含问题和答案的调查:

I have a survey with questions and answers:

questions: Question[];
answer: Answer[];

问题所在的位置:

export class Question {
    idQuestion: string;
    question: string;
}

export class Answer {
    idAnswer: string;
    answer: string;
    idQuestion: string;
    type: string; // inputbox - select - etc
}

目前，我可以分别提出问题和回答:

Currently I can render questions and answer separately:

<ul *ngFor="let question of questions;">
    <li>
        <a id="{{question.idQuestion}}">{{question.question}}</a>
    </li>
</ul>
<ul *ngFor="let answer of answers;">
    <li>
        <a id="{{respuesta.idAnswer}}">{{answer.answer}}</a>
    </li>
</ul>

但是我想用以下方式渲染它:

But I want to render it in the way:

question1: answer;
question2: answer;
question3: select;

我如何面对这个问题?Angular2中有任何模式吗?我想避免在问题中的 ts 循环中找到 html 的硬编码，并找到答案.

How can I face the problem? Is there any pattern in Angular2? I want to avoid the hardcoding of the html from the ts looping in the question and finding the answer.

推荐答案

我的脑海中有两个选择:

Two options from the top of my head:

地图

要么在TS中映射问题和答案，然后使用一个循环显示它们:

Either map the question and answer together in TS and then display them using one loop:

let questionsAndAnswers =
    questions.map(question => {question:question, answer: answers.find((answer) => answer.idQuestion === question.idQuestion)})

这将为您提供一系列包含答案和问题的小管.然后，您可以在html中这样做:

This will give you an array of tubles containing the answer and quiestion. In html you can then do like so:

<ul *ngFor="let questionTuble of questionsAndAnswers ;">
    <li>
        <a id="{{question.idQuestion}}">{{questionTuble.question.question}}:{{questionTuble.answer.answer}}</a>
    </li>
</ul>

更改型号

这是我会正确选择的解决方案:

This is the solution i would properly choose:

更改您的问题模型以包括答案，然后从答案中删除问题ID.我认为这可以提高html的可读性:

Change your question model to include the answer, and remove the questionId from answer. In my opinion this improves read-ability in the html:

<ul *ngFor="let question of questions;">
    <li>
        <a id="{{question.idQuestion}}">{{question.question}}:{{question.answer.answer}}</a>
    </li>
</ul>

为了进一步提高可读性，我将问题的问题"属性重命名为文本或类似内容

And to further improve readability i would re-name the 'question' property of question to text or something similar

(注意，尚未测试这些，因此可能存在一些语法错误)

(Note, haven't tested these, so there may be some syntax errors)

这篇关于呈现动态调查的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！