Question

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

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

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

我如何告知behaviourSubject（通过其获取数据）内容有一些更新？这样表格和顶部（完整/不完整的待办事项数量）就会显示更新的值

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

直接从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。

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

1 个答案: