直到鼠标悬停时才会出现角形表数据

Question

在Angular 7项目中，我有列表页面。

使用材料表和排序。

在该页面中，我从api获取客户数据，然后客户数据转到mat-table的数据源。

但是直到我将鼠标悬停在表格上，数据才出现。有点奇怪。当我将鼠标悬停在表上时，将显示数据。

  

当我添加MatSort功能时会出现此问题。

customers-list.component.ts

// Angular
import { Component, OnInit, ElementRef, ViewChild, ChangeDetectionStrategy, OnDestroy, AfterViewInit } from '@angular/core';
// Material
import { SelectionModel } from '@angular/cdk/collections';
import { MatPaginator, MatSort, MatSnackBar, MatDialog, MatTableDataSource } from '@angular/material';
// RXJS
import { debounceTime, distinctUntilChanged, tap, skip, delay, take } from 'rxjs/operators';
import { fromEvent, merge, Subscription, of, Observable } from 'rxjs';
// Translate Module
import { TranslateService } from '@ngx-translate/core';
// NGRX
import { Store, ActionsSubject, select } from '@ngrx/store';
import { AppState } from '../../../../core/customers/_reducers/customer.reducer';
// CRUD
import { LayoutUtilsService, MessageType, QueryParamsModel } from '../../../../core/_base/crud';
// Services and Models
import { Customer } from '../../../../core/customers/_models/customer.model';
import * as customerActions from '../../../../core/customers/_actions/customer.action';
import * as fromCustomer from '../../../../core/customers/_selectors/customer.selector';

@Component({
  selector: 'customers-list',
  templateUrl: './customers-list.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CustomersListComponent implements OnInit, AfterViewInit {

  // Table Variables
  @ViewChild('customerSort') sort: MatSort;

  selection = new SelectionModel<Customer>(true, []);
  displayedColumns = ['select', 'Username', 'FirstName', 'LastName', 'Email'];
  dataSource: MatTableDataSource<Customer>;

  // Data Variables
  customers$: Observable<Customer[]>;
  customers: Customer[] = [];
  error$: Observable<string>;
  loading$: Observable<boolean>;

  constructor(
    public dialog: MatDialog,
    private layoutUtilsService: LayoutUtilsService,
    private translate: TranslateService,
    private store: Store<AppState>
  ) { }

  ngOnInit() {
    this.loadCustomersList();
    this.subscribeToCustomers();
    this.sort.sortChange.subscribe(() => { console.log(this.sort.active, this.sort.direction)});

  }

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }

  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  /** Selects all rows if they are not all selected; otherwise clear selection. */
  masterToggle() {
    this.isAllSelected() ?
      this.selection.clear() :
      this.dataSource.data.forEach(row => this.selection.select(row));
  }

  loadCustomersList() {
    this.store.dispatch(new customerActions.LoadCustomers);
    this.customers$ = this.store.pipe(select(fromCustomer.getCustomers));
    this.loading$ = this.store.pipe(select(fromCustomer.isLoading));
  }

  subscribeToCustomers() {
    this.customers$.subscribe(customers => {
      this.dataSource = new MatTableDataSource<Customer>(customers);
    });
  }

}

customers-list.component.html

    <mat-table #table [dataSource]="dataSource" matSort #customerSort="matSort" matSortActive="Username"
        matSortDirection="asc" matSortDisableClear>
        >
        <!-- Checkbox Column -->
        <ng-container matColumnDef="select">
            <mat-header-cell *matHeaderCellDef>
                <mat-checkbox (change)="$event ? masterToggle() : null"
                    [checked]="selection.hasValue() && isAllSelected()"
                    [indeterminate]="selection.hasValue() && !isAllSelected()">
                </mat-checkbox>
            </mat-header-cell>
            <mat-cell *matCellDef="let row">
                <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)">
                </mat-checkbox>
            </mat-cell>
        </ng-container>
        <!-- Position Column -->
        <ng-container matColumnDef="Username">
            <mat-header-cell *matHeaderCellDef mat-sort-header>
                Username
            </mat-header-cell>
            <mat-cell *matCellDef="let element">
                {{ element.Username }}
            </mat-cell>
        </ng-container>
        <!-- Name Column -->
        <ng-container matColumnDef="FirstName">
            <mat-header-cell *matHeaderCellDef mat-sort-header>
                First Name
            </mat-header-cell>
            <mat-cell *matCellDef="let element">
                {{ element.FirstName }}
            </mat-cell>
        </ng-container>
        <!-- Weight Column -->
        <ng-container matColumnDef="LastName">
            <mat-header-cell *matHeaderCellDef mat-sort-header>
                Last Name
            </mat-header-cell>
            <mat-cell *matCellDef="let element">
                {{ element.LastName }}
            </mat-cell>
        </ng-container>
        <!-- Symbol Column -->
        <ng-container matColumnDef="Email">
            <mat-header-cell *matHeaderCellDef mat-sort-header>
                Email
            </mat-header-cell>
            <mat-cell *matCellDef="let element">
                {{ element.Email }}
            </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns" (click)="selection.toggle(row)">
        </mat-row>
    </mat-table>