Angular Material MatTable刷新数据

时间：2021年5月8日13:17:19

在Angular配合上Material上以后，整个UI确实好看了许多

但是问题是MatTable加上Paginator可以实现初始化、分页和翻页功能，但是找了好几天也没有找到是这么刷新table的。

下面是实现方法：

1. 先看数据是这么加载的

  getInvoiceData(): void {
    const url = 'api/invoice/getInvoiceByPages';
    
    console.log('获取数据1');
    // merge是合并的意思，本来是合并监听两个组件的动作，这里只有一个
    // merge(this.paginator.page)
    this.paginator.page   // 1
      .pipe(
        startWith({}),
        switchMap(() => {
          console.log('获取数据2');
          // 开始
          const data = {   // 2
            pageIndex: this.paginator.pageIndex,
            pageSize: this.paginator.pageSize
          };
          this.isLoadingResults = false;
          return this.httpService.getData(url, data);   // 3
        }),
        map(retResult => {   // 4
          // 解析拆分各个数据
          // return的是最核心的数据
          console.log(retResult);
          this.isLoadingResults = false;   // 5
          this.totalElements = retResult.data.totalElements;
          return retResult.data.content;
        }),
        catchError(() => {
          this.isLoadingResults = false;
          return observableOf([]);
        })
      )
      .subscribe({
        next: (data) => {
          // 这里拿到的是map中return的数据
          this.invoiceList = data;
          this.invoiceDataSource.data = data;  // 6
        },
        error: (err) => (console.log(err)),
      });
  }

说明：（注释的地方）

1. 这种写法可以监听分页器的动作，如果有修改页大小和翻页的时候，可以触发这个事件。

在官方的示例里面，代码是这样写的

  ngAfterViewInit() {
    this.exampleDatabase = new ExampleHttpDatabase(this._httpClient);

    this.filteredAndPagedIssues = merge(this.sort.sortChange, this.paginator.page)  // 重点看这里
      .pipe(
        startWith({}),
        switchMap(() => {
          this.isLoadingResults = true;
          return this.exampleDatabase!.getRepoIssues(
            this.sort.active, this.sort.direction, this.paginator.pageIndex);
        }),
        map(data => {
          // Flip flag to show that loading has finished.
          this.isLoadingResults = false;
          this.isRateLimitReached = false;
          this.resultsLength = data.total_count;

          return data.items;
        }),
        catchError(() => {
          this.isLoadingResults = false;
          // Catch if the GitHub API has reached its rate limit. Return empty data.
          this.isRateLimitReached = true;
          return observableOf([]);
        })
      );
  }

在代码中用了merge来合并两者的监听，这样可以同时监听分页器和排序的事件

2. data主要用来构造post请求的参数，这个参数会被添加到url中具体的post请求可以看我的上一篇文章

Angular 的HttpClient的理解

3. 这里是返回请求的结果，顺便提一下，pipe是“管”的意思，类似于水管，应该理解为流的意思

4. map这个关键字也来自于Rxjs，主要还是对返回的数据进行操作，emmm，不懂

5. isLoadingResults 这个变量绑定了html页面中加载条是否显示，使用了*ngIf，就是为true的渲染这个组件，false的不渲染或者移除。组件但是呢，光是用这一个参数，还是会报错，类似于这样

简单来讲呢，就是通过后期改变参数来影响界面的渲染，顺序有点不太好，所以就报错了，

解决方法呢，也很简单

在ngAfterViewInit()中加一句话就好了（重点是第二行）

  ngAfterViewInit(): void {
    this.getInvoiceData();
    this.changeDetectorRef.detectChanges();
  }

并且记得在构造方法中声明哦~

  constructor(
    private httpService: HttpService,
    public changeDetectorRef: ChangeDetectorRef,
    public dialog: MatDialog,
  ) { }

顺便一提，好像从Angular10开始，就需要在使用公共变量的时候，直接初始化数据，而且在使用分页器的时候就需要有这个变量，所以可以直接用，算是顺手。

6. subscribe么，Rxjs中比较常见的，一般就是of返回数据，然后subscribe接受并处理，但是我有点分不清和map的区别在哪里？

先这么写，以后肯定要改。

写着写着就忘记标题了，我说怎么好像忘记事情了。

下面开始讲重点：

基于上面的代码，已经完成了大部分的问题了，剩下就是，我在添加、修改、删除数据以后，需要刷新一下表格，但是要是我重新调用getInvoiceData()这个方法，确实可以做到和初始化一样的效果，毕竟网页新打开也是调用这个方法的。但是后面也出现了一个问题，就是在点击刷新按钮（就是手动调用getInvoiceData()方法）以后，发现翻页时，就会出现多次请求，点击刷新按钮n次，翻页的时候，就会请求n+1次，我猜测问题就是出在对翻页器的监听上，最终还是找到了解决办法：

  refresh(): void {
    // 通过设置pageSize来触发分页器的事件达到重新请求的目的
    // 设置当前的分页大小，总体上来说就是设置了一个寂寞
    this.paginator.firstPage();
    this.paginator._changePageSize(this.paginator.pageSize); 
  }

如同注释所言，就是通过调用_changePageSize()来触发上面所监听的事件，最后成功刷新。

其实上面的firstPage()方法也有发送请求的能力，表述是这样的：判断是否在第一页，要是不是话，跳转到第一页（顺便请求第一页的数据），那万一我只有一页，或者我当前就是在第一页呢？抱歉，这就不能刷新了。所以还是要另寻他法。

不过，我总觉得应该还有其他更好的方法可以刷新数据。