Angular {{row.contact}} 电子邮件 {{row.email} 持有 硬币 霍尔丁 行动

好的，经过一些自我回忆，我发现我不仅需要订阅@effects才能在mat表中显示EmployeeModel[]，还应该在订阅中实例化UserDataSource。我从未想过会错过这一个，希望也能帮助其他人

.将对其进行进一步测试…见下文

@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)
      );
    });
  }
}

//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);
        });

---

请注意，这是将组件分为容器组件和表示组件的一个很好的理由。在这种情况下，容器组件可以将

.select（getAllEmployees）

返回的可观察对象发出的值作为

@Input（）

属性传递给表示组件，使用异步管道订阅/取消订阅可观察对象。

//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);
        });