ngFor 打印超出应有的内容答案

【问题标题】：ngFor printing more than it shouldngFor 打印超出应有的内容
【发布时间】：2026-01-25 20:35:01
【问题描述】：

我正在从数据库中获取一些数据并使用 ngFor 循环显示它。

HTML：

<div 
  style="background:black; color:aliceblue;" 
  class="col-md-8 col-md-offset-2 text-center"
  [routerLink]="['todo']">
    <h3
    *ngFor="let todo of todos"
    >{{todo.todoHeadline}}</h3>
</div>

TS：

todos: Todo[];
constructor(private todoService: TodoService) { }

ngOnInit() {
  this.todoService.getTodos()
    .subscribe(
      (todos: Todo[]) => {
        this.todos = todos;
      }
    );
}

以及负责获取数据的服务：

getTodos() {
    return this.http.get('http://localhost:3000/todo')
        .map((response: Response) => {
            const todos = response.json().obj;
            let transformedTodos: Todo[] = [];
            for (let todo of todos) {
                transformedTodos.push(new Todo(
                    todo.todoHeadline,
                    todo.todoDescription
                ));
            }
            this.todos = transformedTodos;
            return transformedTodos;
        })
        .catch((error: Response) => {
            return Observable.throw(error.json());
        });
}

所以我在数据库中有 8 个带有属性标题和描述的待办事项。现在 ngFor 打印 8 次 h3 并且在 h3 内打印 8 次，因此它显示 todoHeadline 64 次。我该如何解决？

【问题讨论】：

这是一个奇怪的行为，考虑到 h3 标签只包含插值表达式。您是否在控制台中收到任何错误/警告？
@Jota.Toledo 没有错误或警告
您能否添加您的 HTTP 请求的响应以及有关您本地环境的更多信息（如果您使用的是 angular-cli，则为 ng -v）
我发现了一个错误，这是我的错误，我不小心在包装 div 上放了相同的 ngFor
大声笑，下次将完整的模板添加到您的问题中

标签： angular ngfor

【解决方案1】：

首先，我会尝试将此服务重构为更实用的方式：

getTodos() {
  return this.http.get('http://localhost:3000/todo')
  .map( response => response.json().obj)
  .map( todos => todos.map(todo => new Todo(todo.todoHeadline, todo.todoDescription)));
}

这将使您的代码更易于阅读并找出问题所在。

【讨论】：

Tnx 寻求建议，我还在学习，我会将其标记为解决方案。