Обновить список при добавлении нового элемента

Question

Использование Angular 7 У меня есть следующий сервис ( Пример StackBlitz ):

@Injectable({
  providedIn: 'root'
})

export class TodoService {

  todos: BehaviorSubject<Todo[]> = new BehaviorSubject([
    { id: 1, title: "Buy book", content: "Buy book about angular" },
    { id: 2, title: "Send invoice", content: "Send invoice to client A" }
  ]);

  public get(): Observable<Todo[]> {
    return this.todos.asObservable();
  }

  public create(todo: Todo) {
    this.todos.next(this.todos.value.concat(todo));
  }

}

Этот сервис используется несколькими компонентами:

1. TodoCreateComponent> Создает новые задачи
2. TodoListComponent> Показывает список задач
3. TodoRecentComponent> Показывает последние задачи

Каждый компонент имеет свою собственную модель, сопоставленную с Todo в егопо-своему ...

Некоторые модели используют множество Todo свойств (Title, Content), другие только одно (Title) и т. д.

На моем Пример StackBlitz новый Todo автоматически добавляется в список задач:

Цель

Теперь мне нужно заменить локальные данные данными, взятымииз API:

public get(): Observable<Todo[]> {
  return this.httpClient.get<Todo>(`todos`);
}

public create(todo: Todo) {
  const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
  this.httpClient.post(`todos`, todo, { headers: headers });
}

Вопрос

Вопрос в том, как интегрировать HttpClient, чтобы получить все в синхронизации:

Так что, когда новый Todo создан список Todos должен быть обновлен ...

Answer 1

Используйте сервис уведомлений, чтобы сообщить компоненту списка о переполнении сервера.

export class RepollTodosNotificationService {

  subject: ReplaySubject<any> = new ReplaySubject();
  obs: Observable<any> = this.subject.asObservable;

  notify = (data: any) => {
    this.subject.next(data)
  }
}

Сделать сервис синглтон:

(app.module.ts)

@NgModule({
  providers: [RepollTodosNotificationService]
})

В TodoCreateComponent

this.todoSevice.post(myNewTodo)
     .subscribe(
        result => {
          // current callback code
          this.repollNotifierService.notify(null); // null or data you want to send

В TodoListComponent

export class TodoListComponent implements OnInit, OnDestroy {
    private repollSubscription: Subscription;

    constructor(private repollSvc: RepollTodosNotificationService) {}

    ngOnInit() {
       this.repollSvc.obs.subscribe(() => this.fetchTodos()); // if you transfer data, handle here
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }

    // methods

}

Answer 2

Один из способов сохранить синхронизацию - обновить объект BehaviorSubject после ответа вашего API с помощью оператора RxJS tap, например:

public get(): Observable<Todo[]> {
  return this.httpClient.get<Todo>(`todos`)
     .pipe(tap(todo => this.todos.next(todos)))
}

или

public create(todo): Observable<Todo[]> {
  return this.httpClient.post<Todo>(`apiUrl`, todo)
     .pipe(tap(todo => // do something with the todo ))
}