Angular - 生成动态填空和多项选择练习/问题

Question

几年前，我创建了一个网站，可以在其中创建问题/答案、填空或多项选择练习/问题。对于最后两种类型的问题，所有内容都以文本格式保存在数据库中，如下所示：

The rabbit eats !!!12345!!! and lives in a !!!45678!!!.

在这里，模式!!!nnnnn!!!代表一个“问题”，可以是文本输入（填空），也可以是具有多项选择的下拉菜单。这样，我可以将它们插入到文本中的任何位置，并且提供了非常动态的练习。

到目前为止，我正在做的是使用 Django 在服务器级别生成 HTML 并直接返回相应的输入或下拉列表，这里将给出示例：

<p>
    The rabbit eats 
        <select id="12345">
            <option value="carrot">carrot</option>
            <option value="banana">banana</option>
        </select>
    and lives in a <input type="text" id="45678">.
</p>

然后通过 AJAX 请求更正用户给出的每个值，仅此而已（正确的值存储在数据库中）。

目前，我想将网站移植到 Angular，我想知道该怎么做。我可以使用 [innerHTML] 和“safeHtml”管道，但我怀疑这是要走的路（是吗？）。如果有人可以在前进的道路上给我建议，那就太好了，现在我看不到。感谢您阅读我的问题！

Answer 1

我之前在 Angular 中做过类似的事情，虽然我没有在段落中间做“内联”问题 - 我有问题文本，然后是一个答案，在你的场景中，它可能有不同的 HTML 控件类型。

但是，我认为您的方案的解决方案可能是相似的。 这是我的建议：

在后端，对于每个问题，存储要显示的项目列表。 列表中的每个项目都可以是一大块文本或各种类型的“答案数据”，例如带 id 的简单文本输入，带 id 和选项数据的选择等，但作为数据，而不是作为 HTML。

在客户端，对后端进行 API 调用以获取包含问题数据列表的 JSON。

然后，为每个块渲染组件 - 段落文本的跨度或 div，简单文本的“文本”类型输入，带有选项的选择数据的选择，等等。

至于如何渲染这些，基本上有两种选择：

1. 循环遍历“块”列表并在循环内部，为每个块类型设置一个块，每个块都带有 *ngIf 以匹配类型。

例如：

<div *ngFor="let chunk of chunks">
  <span *ngIf="chunk.type === 'para-text'" id="chunk.id">{{ chunk.text }}</span>
  <input type="text" *ngIf="chunk.type === 'text-input'" id="chunk.id">
  <select *ngIf="chunk.type === 'select' id="chunk.id">
   <option *ngFor="let opt of chunk.options" value="opt.value">{{opt.label}}</option>
  <select>
</div>

2，更优雅但不太明显的方法是使用动态组件。有关这方面的更多信息，请参阅https://angular.io/guide/dynamic-component-loader