ngFor以上で印刷する

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倍の出力を行いますので、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))); 
} 

これは読み、問題があるoutwhere把握するためにあなたのコードをより簡単になります。