Как обновить тему поведения после запроса патча?

Question

Как обновить представление новыми значениями после запроса патча?

Я создал фиктивное приложение на stackblitz. https://stackblitz.com/edit/angular-j35vrb

При нажатии на любую строку в таблице открывается модальное состояние и обновляется статус TODO. Если статус не завершен = false, запрос на исправление отправляется, и статус обновляется до true (можно увидеть в журнале консоли).

Как сообщить поведенческому субъекту (по которому выбираются данные), что в контенте есть какое-то обновление? так что в таблице, а также в верхнем разделе (число завершенных / неполных Todos) отображаются обновленные значения

Answer 1

Я обновил ваш стек с решением.Вот что вам нужно сделать.

В main.service.ts,

Сохраните ссылку на задачи в самой службе для будущих обновлений.См. Ниже.

private allTodos: Todo[];

  getTodo() {
    if(!this.allTodos$){
      this.allTodos$ = <BehaviorSubject<Todo[]>>new BehaviorSubject(new Array<Todo>());
      this.http
        .get<Todo[]>(
          'https://jsonplaceholder.typicode.com/todos'
      ).subscribe(
          (data: Todo[]) => {
            this.allTodos = data;
            this.allTodos$.next(data);
          }
        ),
        error => console.log(error);
    }    
  }

Возврат объекта BehaviourSubject непосредственно из метода subscribetoTodos.Темы могут быть подписаны напрямую.

subscribetoTodos(): Observable<Todo[]>{
    return this.allTodos$;
  }

обновите метод 'updateToDo', как показано ниже.Обратите внимание, что я обновляю одну ссылку на Todo в списке и отправляю ее подписчикам через следующую.

updateTodo(id){
    this.http.patch('https://jsonplaceholder.typicode.com/todos/' + id , { 'completed': true })
    .subscribe(
      data => {
        this.allTodos.find(todo => {
          if (todo.id === id) {
            Object.assign(todo, data);
            return true;
          }
          return false;
        });
        console.log(data);
        this.allTodos$.next(Object.assign([], this.allTodos));
      },
      error => console.log(error)
    )
  }

Это обновит ваше представление.

В случае разбитых на страницы данных изменитеподписка на ниже.

ngOnInit() {
    this.todos$ = this.mainService.subscribetoTodos();
    this.todos$.subscribe(
      (data)=>{
      this.page = this.page || 1;
      this.pageSize = 10;
      }
    )
  }

Обратите внимание, как я проверяю, существует ли this.page, затем используйте его, иначе перейдите на страницу 1.

this.page = this.page || 1;

Ранее это было,

this.page = 1;

, который сбрасывал страницу обратно на 1 при каждом обновлении.