angular - 实体未在@ngrx/data 中更新

Question

我正在尝试通过创建简单的 TODO 应用程序来学习 @ngrx/data

我创建了简单的 ToDoDataService 来覆盖默认的 HTTP

@Injectable()
export class TodosDataService extends DefaultDataService<Todo> {

  constructor(httpClient: HttpClient, httpUrlGenerator: HttpUrlGenerator) {
    super('Todo', httpClient, httpUrlGenerator);
  }

  getAll(): Observable<Array<Todo>> {
    console.log('asfsfsfsf')
    return this.http.get('https://jsonplaceholder.typicode.com/todos')
      .pipe(
        map((res: any) => res)
      );
  }

  getWithQuery(query): Observable<Array<any>> {
    console.log('asfsfsfsf', query);
    return this.http.get(`https://jsonplaceholder.typicode.com/todos?${query}`)
      .pipe(
        map((res: any) => res)
      );
  }    
}

在路由解析器中，我正在这样做

@Injectable()
export class TodosResolver implements Resolve<boolean> {

  constructor(private todoService: TodoEntityService) {

  }
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean>  {

    return this.todoService.loaded$
      .pipe(
        tap(loaded => {
          if (!loaded) {
            this.todoService.getAll();
          }
        }),
        filter(loaded => !!loaded),
        first()
      );
  }

}

这工作正常并且商店/实体已更新

但在我的组件中，我正在这样做

export class HomeComponent implements OnInit {

  loading$: Observable<boolean>;

  todos$: Observable<Todo[]>;

  constructor(
    private todoService: TodoEntityService
  ) { }

  ngOnInit() {
    console.log('dsdf');
    this.todos$ = this.todoService.entities$
      .pipe(
        tap(todos => {
          console.log(todos);
          this.loadMore();
          console.log(todos);

        }),
        map((todos: any) => todos),
        first()
      );
  }

  loadMore() {
    this.todoService.getWithQuery('_start=20&_limit=5');
  }

}

这里 API 正在调用，但实体仍在显示旧数据。不确定我做错了什么，

请帮忙

Answer 1

欢迎来到@ngrx/data。

我建议您查看 ngOnInit 中的代码片段.
在这里，您调用loadMore每次更新集合时，隐含一个新的 Http 请求的方法。

您的代码应如下所示:

ngOnInit() {
  // keep a local reference to observable of entities
  this.todos$ = this.todoService.entities$;

  // request a first load on view init
  this.loadMore();
}

这样，里面的代码TodosResolver不是真的需要。

如果你想实现一个 加载更多 功能，您应该对另一个事件使用react(例如滚动或单击按钮)，然后再次调用 loadMore .

您的可观察对象如 entities$或 loaded$只是数据管道，在发出新值时不应该分派(dispatch)操作。
如果真的需要，宁愿写一个@ngrx/effect ，它已经完成了。

如果要更改数据或其格式，可以使用 Observable管道，但不是用于调用新操作。

例如，这是可以的:

this.todos$ = this.todoService.entities$.pipe(
  map(entities => entities.map(entity => ({
    ...entity,
    authorName: entity.authorFirstname + ' ' + entity.authorLastName
  })));
);

希望我的回答是明确的，对你有所帮助。