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

这将为您提供包含答案和静止的一系列tubles。在html中你可以这样做：

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

更改模型

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

更改您的问题模型以包含答案，并从答案中删除问题ID。在我看来，这提高了html中的可读性：

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

为了进一步提高可读性，我会重新命名这个问题＆＃39;问题的属性或文字或类似的东西

（注意，没有对这些进行测试，因此可能存在一些语法错误）

渲染动态调查

1 个答案: