javascript - 如何在补丁请求后更新行为主体？

Question

发出补丁请求后如何用新值更新 View ？

我在 stackblitz 上创建了一个虚拟应用程序。 https://stackblitz.com/edit/angular-j35vrb

单击表中的任何行时，都会打开一个模式并更新 TODO 的状态。如果状态不完整= false，则发送补丁请求并将状态更新为true(可以在控制台日志中看到)。

我如何通知behaviorSubject(通过其获取数据)内容有更新？以便表格和顶部部分(完整/不完整的待办事项数量)显示更新的值

Answer 1

我已经用解决方案更新了您的 stackblitz。这是您需要做的。

在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);
    }    
  }

直接从 subscribetoTodos 方法返回 BehaviourSubject。主题可以直接订阅。

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

更新“updateToDo”方法如下。请注意我是如何更新此处列表中的 Todo 的一个引用并通过 next 将其发送给订阅者的。

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

这将更新您的 View 。

如果是分页数据，请将订阅更改为以下内容。

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。