数据源中的数据更新时如何更新Mat表格视图

时间:2019-08-02 12:16:57

标签: node.js angular mat-table

我正在使用Angular Mat Table填充数据库中的数据,一切正常,但是唯一的问题是,如果数据库中的某些记录已更新,mat table无法更新视图,我必须刷新页面才能查看记录中的更改。我想要使用mat表进行实时更新吗?

以下是我的代码

dataSource: macDataSource;
this.dataSource = new macDataSource(this.MacService);
this.dataSource.loadMacs('', 'asc', 0, 10);

loadMacPage()

{
    this.dataSource.loadMacs(this.search_sims.nativeElement.value, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize);
}


ngAfterViewInit()
{
    fromEvent(this.search_sims.nativeElement, 'keyup').pipe(tap(async () => {
        this.paginator.pageIndex = 0;
        this.loadMacPage();

    })).subscribe();
    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
    merge(this.sort.sortChange, this.paginator.page).pipe(tap(() => this.loadMacPage())).subscribe();
    this.ngx.stop();

}

export class macDataSource extends DataSource<MacModel[]>
{
    private macSubject = new BehaviorSubject<MacModel[]>([]);
    private loadingSubject = new BehaviorSubject<boolean>(false);
    public loading$ = this.loadingSubject.asObservable();
    public macLength: any;
    public macData: any;
    constructor(private macService: MacService) {
        super();
    }
    connect(collectionViewer: CollectionViewer): Observable<any> {
        return this.macSubject.asObservable();
    }

    disconnect(collectionViewer: CollectionViewer): void {
        this.macSubject.complete();
        this.loadingSubject.complete();
    }

    loadMacs(filter = '', sortDirection = 'asc', pageIndex = 0, pageSize = 10) {
        this.loadingSubject.next(true);
        this.macService.getAllmacs(filter, sortDirection, pageIndex, pageSize).pipe(catchError(() => of([])), finalize(() => this.loadingSubject.next(false)))
            .subscribe(macs => { this.macSubject.next(macs); this.macLength = macs.length; this.macData = macs; this.loadingSubject.next(macs) });
    }

    getLength(): String {
        return this.macLength;
    }
}

0 个答案:

没有答案