Angular 4. Github source
我有一个由Web服务填充的菜单。 Web服务位于taskService中,但现在不是必需的。
ngOnInit() {
this.getTasks();
}
getTasks(): void {
this.taskService.getTasks()
.subscribe(Tasks => this.tasks = Tasks);
}
当您单击某个任务时,它会加载一个页面,一个不同的组件,表单已准备好更新数据。它也是由Web服务制作的,工作正常。问题是更新任务后,它没有反映在任务菜单中
我正在导入这个:
import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
并将其添加到构造函数:
private cdRef: ChangeDetectorRef
在使用save()函数更新数据之后,这是我对detectChanges()函数的最佳方法
this.taskService.updateTask(task, id)
.subscribe(
this.Ref.detach();
setInterval(() => {
this.Ref.detectChanges();
}, 5000);
);
这是从菜单中打印任务的html:
<li *ngFor="let task of tasks" class="d-inline-block col-md-12">
<a routerLink="/task/{{task.id}}" > {{task.title}}</a>
<!-- <span class="close big"></span> -->
<button class="close big" title="delete task"
(click)="delete(task)">x</button>
</li>
这是更新任务的表单
<form (ngSubmit)="save(taskName.value, taskBody.value)" #taskForm="ngForm" class="example-form">
<mat-form-field class="example-full-width">
<label>Task Name</label>
<input matInput [(ngModel)]="task.name" #taskName name="name">
</mat-form-field>
<mat-form-field class="example-full-width">
<textarea matInput [(ngModel)]="task.body" #taskBody name="body"></textarea>
</mat-form-field>
<button type="submit" class="btn btn-success" >Save</button>
</form>
两者都有不同的组成部分。
我试图遵循这个tutorial,但我卡住了,我不知道如何使用ChangeDetectorRef。
我看了你的代码。问题是view-task.component
更新了您的任务,但navigation.component
没有收到有关此交易的通知。我认为BehaviorSubject
可能只适合你。
你可以阅读更多关于它here
我假设你在整个应用程序中都有单个tasks
数组,你会在navigation
组件上显示它们。
Task.service.ts
export class TaskService {
// behaviorSubject needs an initial value.
private tasks: BehaviorSubject = new BehaviorSubject([]);
private taskList: Task[];
getTasks() {
if (!this.taskList || this.taskList.length === 0) {
this.initializeTasks();
}
return this.tasks.asObservable();
}
initializeTasks() {
this.http.get('api/tasks')
.subscribe(tasks => {
// next method will notify all of the subscribers
this.tasks.next(tasks);
}, error => {
// proper error handling here
});
}
updateTasks(task: Task) {
this.http.post('api/updateTask')
.subscribe(resp => {
// update your tasks array
this.tasks = ...
// and call next method of your behaviorSubject with updated list
this.tasks.next(this.tasks);
}, error => {
// proper error handling here
});
}
}
Navigation.component.ts
export class NavigationComponent implements OnInit{
tasks: Task[];
constructor(private taskService: TaskService) {}
ngOnInit() {
// this method will be called every time behaviorSubject
// emits a next value.
this.taskService.getTasks()
.subscribe(tasks => this.tasks = tasks);
}
}
查看-task.component.ts
export class ViewTaskComponent {
constructor(private taskService: TaskService) {}
updateTask(task: Task) {
this.taskService.updateTask(task);
}
}
我自己没有尝试过这段代码。但是,我之前已在我的应用程序中实现了类似的功能。因此,当您尝试并遇到问题时,请告诉我。
Angular没有运行changeDetection
,因为你没有要求它。 ViewTaskComponent
中的实例变量都没有在save
方法中更新。
在你的代码中,在updateTask()
完成后,它将返回save()
中的ViewTaskComponent
。但是在this.task
的订阅回调中没有与this.taskService.updateTask()
的链接。
由于updateTask
使用PATCH请求,我假设你没有得到整个Task
对象。所以你不能只说this.task = valuePassedToSubscribeCallback
。
相反,您可以在该订阅回调中调用this.viewTask()
并获取整个更新的Task
对象。
例如:
this.taskService.updateTask(task, id)
.subscribe(
// new line here to fetch the updated Task object
this.viewTask()
);
注意:我的第二个@Bunyamin Coskuner建议使用BehaviorSubject
(甚至是标准的Subject
)。如果您要使用重构器,那么它们是一种在您的服务中管理状态的简洁方法。