使用ListService轻松查询列表

ListService 是一种实用程序服务,提供简单的分页,排序和搜索实现.

入门

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

  1. import { ListService } from '@abp/ng.core';
  2. import { BookDto } from '../models';
  3. import { BookService } from '../services';
  5. @Component({
  6.   /* class metadata here */
  7.   providers: [
  8.     // [Required]
  9.     ListService,
  11.     // [Optional]
  12.     // Provide this token if you want a different debounce time.
  13.     // Default is 300. Cannot be 0. Any value below 100 is not recommended.
  14.     { provide: LIST_QUERY_DEBOUNCE_TIME, useValue: 500 },
  15.   ],
  16.   template: `
  18.   `,
  19. })
  20. class BookComponent {
  21.   items: BookDto[] = [];
  22.   count = 0;
  24.   constructor(
  25.     public readonly list: ListService,
  26.     private bookService: BookService,
  27.   ) {}
  29.   ngOnInit() {
  30.     // A function that gets query and returns an observable
  31.     const bookStreamCreator = query => this.bookService.getList(query);
  33.     this.list.hookToQuery(bookStreamCreator).subscribe(
  34.       response => {
  35.         this.items = response.items;
  36.         this.count = response.count;
  37.         // If you use OnPush change detection strategy,
  38.         // call detectChanges method of ChangeDetectorRef here.
  39.       }
  40.     ); // Subscription is auto-cleared on destroy.
  41.   }
  42. }

注意 list 是 public 并且 readonly. 因为我们将直接在组件的模板中使用 ListService 属性. 可以视为反模式,但是实现起来要快得多. 你可以改为使用公共组件属性.

像这样绑定 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>

与Observables一起使用

你可以将Observables与Angular的AsyncPipe结合使用:

  1.   book$ = this.list.hookToQuery(query => this.bookService.getListByInput(query));
  1. <!-- simplified representation of the template -->
  3. <ngx-datatable
  4.   [rows]="(book$ | async)?.items || []"
  5.   [count]="(book$ | async)?.totalCount || 0"
  6.   [list]="list"
  7.   default
  8. >
  9.   <!-- column templates here -->
  10. </ngx-datatable>
  12. <!-- DO NOT WORRY, ONLY ONE REQUEST WILL BE MADE -->

…or…

  1.   @Select(BookState.getBooks)
  2.   books$: Observable<BookDto[]>;
  4.   @Select(BookState.getBookCount)
  5.   bookCount$: Observable<number>;
  7.   ngOnInit() {
  8.     this.list.hookToQuery((query) => this.store.dispatch(new GetBooks(query))).subscribe();
  9.   }
  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.   <!-- column templates here -->
  10. </ngx-datatable>

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

如何在创建/更新/删除时刷新表

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

  1. this.store.dispatch(new DeleteBook(id)).subscribe(this.list.get);

…or…

  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">

ABP v3.0的重大更改

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

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

从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"
  5. ></abp-table>

重要提示: abp-table 没有被删除,但是会被弃用,并在将来的版本中移除,请考虑切换到 ngx-datatable.