Установите переменную компонента в angular 7 в конструкторе и получите ее в методе правильно, не повторяя - PullRequest
Новая
       7

Установите переменную компонента в angular 7 в конструкторе и получите ее в методе правильно, не повторяя

0 голосов
/ 21 февраля 2019

Проблема: мне нужно получить некоторую переменную-член, но чтобы было более понятно ее значение.В результате я получаю требуемое значение переменной, но когда я console.log, эта переменная выдает какой-то странный вывод, который я считаю неправильным для получения.

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

И вот почему я получаю этот странный вывод?Пожалуйста, кто-нибудь, помогите мне понять, как правильно установить переменную-член this.todos, чтобы при вызове ее другими методами я получал правильные данные с нужным количеством.

изображение для странного вывода: https://i.stack.imgur.com/owXHj.png

...