用文本框替换特定的一组特殊字符，并从每个文本框中检索值。

Question

我正在尝试实现一个场景，在这个场景中，学生可以回答空格类型的问题。一个问题中可以有多个空格。问题来自API。

我想要实现的是，用“文本框”替换每个特殊字符，学生可以在文本框中键入他们的答案。当我保存答案时，整个字符串将被保存。

例：

问:约翰___去___学校。他是___的好孩子。

应将其表述为：

约翰去上学了。他是个好孩子。

当把它发送到API时，我会把它作为字符串发送，就像John要上学一样。他是个好孩子。

我将如何用TypeScript实现这一目标。

任何帮助或想法，以其他方式这样做，是非常感谢的。

谢谢。

Answer 1

这是一个stackblitz

您需要通过___拆分问题，然后在拆分结果的每个索引之后附加一个输入。

parts = [];
inputControls = [];

parts = this.question.split('___');

然后在模板中

<div>
  <span *ngFor="let p of parts; let i = index;">{{p}}
    <span *ngIf="i < parts.length -1">
    <input type="text" [(ngModel)]="inputControls[i]" /></span>
    </span>
</div>
<div>
  <button type="button" style="margin-top: 40px; background-color: green; color: white" (click)="submit()">Submit</button>
</div>

在提交方法中，编写您的回答如下

submit(){
    let answer = '';

    for(let i = 0; i < this.parts.length; i++){
        answer += this.parts[i];
        if(i < this.inputControls.length)
          answer += this.inputControls[i];
    }

    console.log(answer);
  }