angular - Mat-Table(数据源)+ 使用 Ngrx Store/Effects

Question

一直在玩 ngrx/store，遇到了使用 Material-Datatable 显示数据的问题。虽然我能够使用效果从服务器检索数据，但似乎数据源没有识别出数据。我是新手，这似乎我找不到在这里遇到同样情况的任何人，所以值得输入。请注意:::我的商店/效果没有问题，我能够从服务器检索数据。

见下面的代码:

user1.component.ts

@Component({
  selector: "app-user1",
  templateUrl: "./user1.component.html",
  styleUrls: ["./user1.component.scss"]
})
export class User1Component implements OnInit {
  displayedColumns = ["firstName", "lastName", "contact", "email", "actions"];
  displayedtransColumns = ["coin", "holdings", "price", "action"];
  userDatabase: EmployeeModel[] = [];
  dataSource: any | null;
  index: number;
  id: string;
  selectedUserId: string;

  users: Array<EmployeeModel> = [];

  transactionListSub: Subscription;
  transactionList: Observable<any>;

  employees$: Observable<EmployeeModel[]>;

  constructor(
    public store: Store<fromStore.UserState>,
    public httpClient: HttpClient,
    public dialog: MatDialog
  ) {}

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild("filter") filter: ElementRef;

  ngOnInit() {
    //dispatch action to load employees

    this.loadData();
  }

  public loadData() {
    /*  this.store.select("employees").subscribe(state => {
      console.log("Store state: " + state.);
    });
 */

    console.log("userDatabase from store: " + this.userDatabase);

    this.store.select(fromStore.getAllEmployees).subscribe(arr => {
      console.log("fromStore.getAllEmp: " + arr);
      this.userDatabase = arr;
      console.log("dataSource: " + this.userDatabase.length);
    });

    this.dataSource = new UserDataSource(
      this.userDatabase,
      this.paginator,
      this.sort
    );

    this.store.dispatch(new fromStore.LoadEmp());

    Observable.fromEvent(this.filter.nativeElement, "keyup")
      .debounceTime(1000)
      .distinctUntilChanged()
      .subscribe(() => {
        if (!this.dataSource) {
          return;
        }
        this.dataSource.filter = this.filter.nativeElement.value;
      });
  }

  addTransactionDialog() {
    const dialogRef = this.dialog.open(AddDialogComponent, {
      width: "300px"
    });
    dialogRef.afterClosed().subscribe(result => {
      console.log(result);
    });
  }
}

export class UserDataSource extends DataSource<EmployeeModel> {
  _filterChange = new BehaviorSubject("");

  get filter(): string {
    return this._filterChange.value;
  }

  set filter(filter: string) {
    this._filterChange.next(filter);
  }

  filteredData: EmployeeModel[] = [];
  renderedData: EmployeeModel[] = [];

  constructor(
    public _userDatabase: any,
    public _paginator: MatPaginator,
    public _sort: MatSort
  ) {
    super();
    // Reset to the first page when the user changes the filter.
    this._filterChange.subscribe(() => (this._paginator.pageIndex = 0));
  }

  /** Connect function called by the table to retrieve one stream containing the data to render. */

  connect(): Observable<EmployeeModel[]> {
    // Listen for any changes in the base data, sorting, filtering, or pagination
    const displayDataChanges = [
      this._userDatabase,
      this._sort.sortChange,
      this._filterChange,
      this._paginator.page
    ];
    console.log("fromDatasource: " + this._userDatabase);
    return Observable.merge(...displayDataChanges).map(() => {
      // Filter data
      this.filteredData = this._userDatabase
        .slice()
        .filter((user: EmployeeModel) => {
          const searchStr = (user._id +
            user.firstName +
            user.lastName +
            +user.contact,
          user.email).toLowerCase();
          return searchStr.indexOf(this.filter.toLowerCase()) !== -1;
        });

      // Sort filtered data
      const sortedData = this.sortData(this.filteredData.slice());

      // Grab the page's slice of the filtered sorted data.
      const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
      this.renderedData = sortedData.splice(
        startIndex,
        this._paginator.pageSize
      );
      return this.renderedData;
    });
  }
  disconnect() {}

  /** Returns a sorted copy of the database data. */
  sortData(user: EmployeeModel[]): EmployeeModel[] {
    if (!this._sort.active || this._sort.direction === "") {
      return user;
    }

    return user.sort((a, b) => {
      let propertyA: number | string = "";
      let propertyB: number | string = "";

      switch (this._sort.active) {
        case "_id":
          [propertyA, propertyB] = [a._id, b._id];
          break;
        case "firstName":
          [propertyA, propertyB] = [a.firstName, b.firstName];
          break;
        case "lastName":
          [propertyA, propertyB] = [a.lastName, b.lastName];
          break;
        case "contact":
          [propertyA, propertyB] = [a.contact, b.contact];
          break;
        case "email":
          [propertyA, propertyB] = [a.email, b.email];
          break;
      }

      const valueA = isNaN(+propertyA) ? propertyA : +propertyA;
      const valueB = isNaN(+propertyB) ? propertyB : +propertyB;

      return (
        (valueA < valueB ? -1 : 1) * (this._sort.direction === "asc" ? 1 : -1)
      );
    });
  }
}

user1.component.html

 <div class="row">
    <div class="col-md-8">
        <mat-toolbar color="primary">
            <span>Teammates</span>
            <span class="spacer"></span>
            Reload data:
            <button mat-icon-button (click)="loadData()">
                <mat-icon>refresh</mat-icon>
            </button>
        </mat-toolbar>

        <div class="col-md-12 mat-elevation-z8">
            <div class="form">
                <mat-form-field floatPlaceholder="never" color="accent">
                    <input matInput #filter placeholder="Filter issues">
                </mat-form-field>
            </div>

            <mat-table #table [dataSource]="dataSource" matSort class="mat-cell">
                <!--- Note that these columns can be defined in any order.
              The actual rendered columns are set as a property on the row definition" -->

                <ng-container matColumnDef="firstName">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>FIRST NAME</mat-header-cell>
                    <mat-cell *matCellDef="let row"> {{row.firstName}}</mat-cell>
                </ng-container>

                <ng-container matColumnDef="lastName">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>LAST NAME</mat-header-cell>
                    <mat-cell *matCellDef="let row"> {{row.lastName}}</mat-cell>
                </ng-container>

                <ng-container matColumnDef="contact">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>CONTACT</mat-header-cell>
                    <mat-cell *matCellDef="let row"> {{row.contact}}</mat-cell>
                </ng-container>


                <ng-container matColumnDef="email">
                    <mat-header-cell *matHeaderCellDef mat-sort-header>EMAIL</mat-header-cell>
                    <mat-cell *matCellDef="let row"> {{row.email}}</mat-cell>
                </ng-container>

                <ng-container matColumnDef="actions">
                    <mat-header-cell *matHeaderCellDef>
                        <!--<button mat-icon-button color="primary" (click)="addNew()" matTooltip="Add User" matTooltipPosition="right">
                          <mat-icon aria-label="Example icon-button with a heart icon">add</mat-icon>
                      </button>-->
                        <button class="btn btn-primary btn-sm" (click)="addNew()" matTooltip="Add User" matTooltipPosition="right">
                            <i class="fa fa-user-plus"></i>
                        </button>
                    </mat-header-cell>

                    <mat-cell *matCellDef="let row; let i=index;">
                        <button class="btn btn-primary btn-sm" (click)="startEdit(i, row._id, row.firstName, row.lastName, row.contact, row.email)"
                            matTooltip="Edit User" matTooltipPosition="left">
                            <i class="fa fa-user-circle"></i>
                        </button>
                        <button class="btn btn-danger btn-sm" (click)="deleteItem(i, row._id, row.firstName, row.lastName, row.contact,row.email)"
                            matTooltip="Delete User" matTooltipPosition="right">
                            <i class="fa fa-user-times"></i>
                        </button>
                    </mat-cell>
                </ng-container>

                <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
            </mat-table>

            <mat-paginator #paginator [length]="dataSource.length" [pageIndex]="0" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]">
            </mat-paginator>
        </div>
    </div>
    <div class="col-md-4">
        <mat-toolbar color="primary">
            <span>Holdings</span>
        </mat-toolbar>
        <button class="btn btn-sm btn-primary" (click)="addTransactionDialog()" matTooltip="Add Transaction" matTooltipPosition="right"
            color="primary">
            <i class="fa fa-plus"></i>
        </button>
        <table class="table">
            <tr>
                <td>Coin</td>
                <td>Holding</td>
                <td>Action</td>
            </tr>
        </table>
    </div>
</div>

Answer 1

好吧，经过一些 self 记忆，我发现不仅仅是我需要订阅@effects 才能让 EmployeeModel[ ] 显示在 mat-table 中，UserDataSource 也应该在订阅中实例化。我没想到会错过这个，希望也能帮助别人

.将进一步测试它......见下文。

@user1.component.ts

//dispatch action first 
     this.store.dispatch(new fromStore.LoadEmp());
        console.log("userDatabase from store: " + this.userDatabase);

    //then subscribe to selector of effect in order to convert observable response into EmployeeModel[] and instantiate the Datasource inside
        this.store.select(fromStore.getAllEmployees).subscribe(arr => {
          console.log("fromStore.getAllEmp: " + arr);
          this.userDatabase = arr;

          this.dataSource = new UserDataSource(
            this.userDatabase,
            this.paginator,
            this.sort
          );
          console.log("dataSource: " + this.userDatabase);
        });