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个todos，包含属性标题和描述。现在ngFor打印8次h3并且在h3内打印8次以上它显示todoHeadline 64次。我该如何解决这个问题？

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打印超过它应该

1 个答案: