动态调查

Question

我希望对以下情况有一个看法：

我有一个问题和答案的调查：

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

其中Question是：

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

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

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

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

但我想用这样的方式呈现出来：

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

我该如何面对这个问题？Angular2中有什么模式吗？我希望避免html的硬编码从ts循环在问题和找到答案。

Answer 1

我头上有两种选择：

地图

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

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

这将给你一系列包含答案和提问的图层。在html中，您可以这样做：

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

变化模型

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

更改您的问题模型以包括答案，并从答案中删除questionId。在我看来，这提高了html中的读取能力：

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

为了进一步提高可读性，我会将问题的“问题”属性重新命名为文本或类似的东西。

(注意，还没有测试这些，所以可能会出现一些语法错误)