在构造函数中以角度7设置组件变量，并在方法中正确检索它而不重复

Question

The problem: I need to get some member variable, but to be more clear its value. As a result I get the wanted variable value, but when I console.log this variable it gives some strange output which I think is nor correct to recieve.

to-do.service.ts

import { Injectable } from '@angular/core';
import { ToDo } from '../interfaces/to-do';
import {HttpClient} from '@angular/common/http';
import {filter} from 'rxjs/operators';

const API_URL = 'http://localhost:8000/api/';

@Injectable({
  providedIn: 'root'
})
export class ToDoService {
  todoTitle: string = '';
  idForTodo: number = 4;
  beforeEditCache: string = '';
  filter: string = 'all';
  anyRemainingModel: boolean = true;
  todos: ToDo[] = [];

  constructor(private http: HttpClient) {
   this.todos = this.getToDos();
   console.log(this.todos);
}

getToDos(): ToDo[] {
  this.http.get(API_URL + 'getData.php')
  .subscribe((response: any ) => {
      this.todos = response;
  });
return this.todos;
}

addToDo(todoTitle: string): void {
  if (todoTitle.trim().length === 0) {
    return;
  }

  this.todos.push({
    id: this.idForTodo,
    title: todoTitle,
    completed: false,
    editing: false
  })

  this.idForTodo++;
}

editTodo(todo: ToDo): void {
   this.beforeEditCache = todo.title;
   todo.editing = true;
}

doneEdit(todo: ToDo): void {
  if (todo.title.trim().length === 0) {
    todo.title = this.beforeEditCache;
  }

  this.anyRemainingModel = this.anyRemaining();
  todo.editing = false;
}

cancelEdit(todo: ToDo): void {
  todo.title = this.beforeEditCache;
  todo.editing = false;
}

deleteTodo(id: number): void {
  this.todos = this.todos.filter(todo => todo.id !== id);
}

remaining(): number {
  return this.todos.filter(todo => !todo.completed).length;
}

atLeastOneCompleted(): boolean {
  console.log(this.todos);
  return true;
}

clearCompleted(): void {
  this.todos = this.todos.filter(todo => !todo.completed);
}

checkAllTodos(): void {
   this.todos.forEach(todo => todo.completed = (<HTMLInputElement> event.target).checked)
   this.anyRemainingModel = this.anyRemaining();
}

anyRemaining(): boolean {
  return this.remaining() !== 0;
}

todosFiltered(): ToDo[] {
   if (this.filter === 'all') {
    return this.todos;
   } else if (this.filter === 'active') {
    return this.todos.filter(todo => !todo.completed);
   } else if (this.filter === 'completed') {
    return this.todos.filter(todo => todo.completed);
   }

  return this.todos;
 }
}    

to-do-list.component.html

<input type="text" class="todo-input" placeholder="What needs to be done" [(ngModel)]="todoTitle" (keyup.enter)="addTodo()">

<app-to-do-item
   *ngFor="let todo of todoService.todosFiltered()"
   [todo]="todo"
 ></app-to-do-item>

<div class="extra-container">
  <div><label><input type="checkbox" 
  (change)="todoService.checkAllTodos()"  
  [(ngModel)]="!todoService.anyRemainingModel"> Check All</label> 
</div>
<div>{{ todoService.remaining() }} items left</div>
</div>

<div class="extra-container">
   <div>
     <button [ngClass]="{'active': todoService.filter === 'all'}" 
        (click)="todoService.filter='all'">All</button>
      <button [ngClass]="{'active': todoService.filter === 'active'}" 
        (click)="todoService.filter='active'">Active</button>
      <button [ngClass]="{'active': todoService.filter === 
        'completed'}" 
        (click)="todoService.filter='completed'">Completed</button>
    </div>

   <div *ngIf="todoService.atLeastOneCompleted()">
        <button (click)="todoService.clearCompleted()">Clear 
         Completed</button>
   </div>

 </div>

getData.php

<?php

require 'DatabaseHelper.php';

$dbHelper = new DatabaseHelper();
$queryWorker = $dbHelper->connect();

$sql = "SELECT * FROM todos";

$result = $queryWorker->query($sql);

$result = $result->fetchAll();

header("Access-Control-Allow-Origin: *");
header('Content-Type: application/json');
echo json_encode($result);

And here is it why I am receiving this strange output? Please someone help me to understand how to properly set this.todos member variable so when I call it in other methods I will receive proper data with proper quantity.

image for strange output: https://i.stack.imgur.com/owXHj.png