Угловой интерфейс не обновляется после изменения данных - PullRequest
Новая
       19

Угловой интерфейс не обновляется после изменения данных

0 голосов
/ 19 мая 2019

Я новичок в стеке MEAN и испытываю проблемы с обновлением данных в пользовательском интерфейсе. Я знаю, что данные правильно сохраняются в MongoDB, а также извлекаются, потому что когда я создаю элемент Todo и обновляю страницу, недавно добавленный элемент Todo появляется в списке Todo. Проблема в том, что это не происходит динамически.

Я пробовал несколько разных вещей, включая NgZone и ChangeDetectorRef, чтобы обнаружить изменения, не уверен, что я делаю неправильно ..

Дайте мне знать, если потребуется дополнительная информация .. спасибо!

Компонент списка Todo: 

import { Component, Input, OnInit, NgZone } from '@angular/core';
import { Todo } from '../todo.model';
import { TodoService } from '../../todo.service';

@Component({
selector: 'app-todo-list',
templateUrl: './todo-list.component.html',
styleUrls: ['./todo-list.component.scss'],
providers: [TodoService]
})
export class TodoListComponent implements OnInit {

@Input() todos: Todo[] = [];

constructor(private _todoService: TodoService, private zone: NgZone){}

getTodos() {
    console.log('todo list - get todos');
    this._todoService.getTodos()
        .subscribe(resTodoData => {
            this.zone.run(() => {
                this.todos = resTodoData;
            });
        });
}

ngOnInit() {
    console.log('todo list - init');
    this.getTodos();
}
}

Сервисный компонент: 

import { Injectable, NgZone } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from 
'@angular/http';

import { map } from 'rxjs/operators';
import { Todo } from './todos/todo.model';

 @Injectable({
     providedIn: 'root'
  })
 export class TodoService {

// these were configured in express server
private _getUrl = "/api/todos";
private _postUrl = "/api/todo";

constructor(private _http: Http, private zone: NgZone) { }

getTodos() {

    let json = this._http.get(this._getUrl)
        .pipe(map((response: Response) => response.json()));
    return json;    
}

addTodo(todo: Todo) {
    let headers = new Headers({ 'Content-Type': 'application/json' 
    });
    let options = new RequestOptions({ headers: headers });
    return this._http.post(this._postUrl, JSON.stringify(todo), 
               options)
        .pipe(map((response: Response) => response.json()));
  }
}
...