ng用于打印超出应有的数量

Question

我正在从数据库中获取一些数据并使用 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 次，所以它显示了 64 次 todoHeadline。我该如何解决？

Answer 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)));
}

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

ng用于打印超出应有的数量

ngFor printing more than it should

ngfor

angular