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

Posted 2023-03-13

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

【英文标题】：How can I generate *ngFor loop-items inside 1 single div instead of every single item having a div container around it

【发布时间】：2021-08-10 09:08:42

【问题描述】：

我正在创建一个用于创建打字机的文本生成器（类似于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_URLTextGenerator/words/$Amount`, httpHeaders);

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

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

结果显示：

【问题讨论】：

*ngfor 是 angular 语法，而不是 angularJS。你确定你使用的是angularjs吗？

@cloned 对不起，我的意思是 angular 而不是 angularjs。谢谢你告诉我。

【参考方案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 替换为文本字段，它们还可以实现一些样式和架构。

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

【讨论】：

很抱歉我忘了提及这一点（我将编辑我原来的问题/帖子）。由于我正在尝试创建类似 monkeytype.com 的内容，因此我想确保生成的所有项目都以某种方式位于输入标签内。我需要能够注册/检查用户输入的随机单词是否正确。