时间戳

首页 > 解决方案 > 补丁请求后如何更新行为主题？

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

问题描述

发出补丁请求后如何使用新值更新视图？

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

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

我如何通知 behaviorSubject（通过哪些数据被获取）内容中有一些更新？以便表格和顶部（完整/不完整待办事项的数量）显示更新的值

标签： javascriptangulartypescriptrxjs

解决方案

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

在 main.service.ts 中，

在服务本身中保留对 todos 的引用，以备将来更新。见下文。

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

这将更新您的视图。

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

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。

推荐阅读