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()方法也有发送请求的能力，表述是这样的：判断是否在第一页，要是不是话，跳转到第一页（顺便请求第一页的数据），那万一我只有一页，或者我当前就是在第一页呢？抱歉，这就不能刷新了。所以还是要另寻他法。
不过，我总觉得应该还有其他更好的方法可以刷新数据。