Angular 4.Fonte do Github

Eu tenho um menu que é preenchido por um serviço da web. O serviço da web está no taskService, mas não é necessário agora.

ngOnInit() {
    this.getTasks();
    }
    getTasks(): void {
        this.taskService.getTasks()
            .subscribe(Tasks => this.tasks = Tasks);
    } 

Quando você clica em uma tarefa, ela carrega uma página, um componente diferente, com um formulário pronto para atualizar os dados. Também é feito por um serviço da web e funciona bem.O problema é que, após atualizar a tarefa, ela não é refletida no menu de tarefas

Estou importando isso:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';

e adicionando isso ao construtor:

private cdRef: ChangeDetectorRef

E esta é minha melhor abordagem para a função detectChanges (),depois de atualizar os dados com a função save ()

  this.taskService.updateTask(task, id)
          .subscribe(
              this.Ref.detach();
              setInterval(() => {
                this.Ref.detectChanges();
              }, 5000);
      );

Este é o html do menu para imprimir as tarefas:

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

E este é o formulário que atualiza a tarefa

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

Ambos estão em componentes diferentes.

Eu tentei seguir issotutorial, mas estou preso, não sei como usar o ChangeDetectorRef.