如何在 1 个单个 div 中生成 *ngFor 循环项，而不是每个项目周围都有一个 div 容器

Question

我正在创建一个用于创建打字机的文本生成器（类似于https://monkeytype.com/）。因此，我有一个包含数千个单词的表的数据库。本质上，我希望能够遍历表格（x 次），然后在 1 个带有文本的单个 div 中显示单词。而是为我不想要的每个单词生成一个 div。

 <div class="d-flex flex-wrap typewriter-text-container justify-content-center">
     <div *ngFor="let words of word" class="typewriter-text">
       <div class="form-control-plaintext" (keyup)="startTypingSession($event)">{{words.word}}</div>
     </div>
  </div>

这是我的 HTML 和一些 TypeScript。我正在使用 Angular。

getWordsAmount(Amount: number): Observable<TextsGenerated[]>{
  return this.http.get<TextsGenerated[]>(`${this.ROOT_URL}TextGenerator/words/${Amount}`, httpHeaders);
}

这是我发出的 GET 请求，目的是从我的表中获取所需数量的单词。

编辑： 由于我正在尝试创建类似 monkeytype.com 的内容，因此我想确保生成的所有项目都以某种方式位于输入标签内。我需要能够注册/检查用户输入的随机单词是否正确。

结果显示：

Answer 1

据我了解，您不希望在 ngFor 之后出现“div”。你不是吗？

    <div class="d-flex flex-wrap typewriter-text-container justify-content-center">
     <div *ngFor="let words of word" class="typewriter-text">
       <h1 class="form-control-plaintext" (keyup)="startTypingSession($event)">{{words.word}}</h1>
     </div>
  </div>

为此，您只需将 div 替换为文本字段，它们还可以实现一些样式和架构。

希望这对您有所帮助，如果没有，请见谅；)