mean-stack - 数据更改后Angular UI不更新
问题描述
我是 MEAN 堆栈的新手,无法在 UI 中刷新数据更改。我知道数据在 MongoDB 中正确保存,并且也被检索,因为当我创建一个 Todo 项并刷新页面时,新添加的 Todo 项出现在 Todo 列表中。问题是它不是动态发生的。
我尝试了许多不同的方法,包括 NgZone 和 ChangeDetectorRef 来检测更改,但不确定我做错了什么。
如果需要更多信息,请告诉我。谢谢!
待办事项列表组件:
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()));
}
}
解决方案
推荐阅读
- c++ - unique_ptr 作为模板参数
- javascript - javascript中“删除”关键字的奇怪行为
- python - 如何从另一个子程序中更改子程序中的变量
- python - 弹出前 N 个元素
- javascript - 任何人都可以看到这个 javascript 代码中的错误吗?填充二维数组
- r - knitr 切断 coord_fixed ggplot
- database - 邮政编码/邮政编码和位置数据库
- java - 字节数组值的内存高效映射
- php - 如何使用 Curl (ringCaptcha) 发送短信
- c# - Multiple joins in SQL statement