使用ListService轻松查询列表

    ListService 没有在根提供. 原因是通过这种方式它会清除组件上的所有订阅. 你可以使用可选的 LIST_QUERY_DEBOUNCE_TIME 令牌调整debounce行为.

    像这样绑定 ListService 到 ngx-datatable:

    1. <ngx-datatable
    2.   [rows]="items"
    3.   [count]="count"
    4.   [list]="list"
    5.   default
    6. >
    7.   <!-- column templates here -->
    8. </ngx-datatable>
    1.   book$ = this.list.hookToQuery(query => this.bookService.getListByInput(query));

    …or…

    1.   @Select(BookState.getBooks)
    3.   @Select(BookState.getBookCount)
    6.   ngOnInit() {
    7.     this.list.hookToQuery((query) => this.store.dispatch(new GetBooks(query))).subscribe();
    8.   }
    1. <!-- simplified representation of the template -->
    3. <ngx-datatable
    4.   [rows]="(books$ | async) || []"
    5.   [count]="(bookCount$ | async) || 0"
    6.   [list]="list"
    7.   default
    8. >
    9. </ngx-datatable>

    我们不建议将NGXS存储用于CRUD页面,除非你的应用程序需要在组件之间共享列表信息或稍后在另一页面中使用它.

    ListService 公开了一个 get 方法来触发当前查询的请求. 因此基本上每当创建,更新或删除操作解析时,你可以调用 this.list.get(); 它会调用钩子流创建者.

    1. this.bookService.createByInput(form.value)
    2.   .subscribe(() => {
    3.     this.list.get();
    5.     // Other subscription logic here
    6.   })

    ListService 公开一个 filter 属性,该属性将使用当前查询和给定的搜索字符串触发一个请求. 你需要做的就是通过双向绑定将其绑定到输入元素.

    1. <!-- simplified representation -->
    3. <input type="text" name="search" [(ngModel)]="list.filter">

    我们必须修改 ListService 使其与 ngx-datatable 一起使用. 之前 page 属性的最小值为 1, 你可以像这样使用它:

    从v3.0开始, 对于ngx-datatable, 初始页面的 page属性必须设置为 0. 因此如果你以前在表上使用过 ListService 并打算保留 abp-table,则需要进行以下更改:

    1. <!-- other bindings are hidden in favor of brevity -->
    2. <abp-table
    3.   [page]="list.page + 1"
    4.   (pageChange)="list.page = $event - 1"