一直在玩ngrx / store并且遇到了使用Material-Datatable显示数据的问题。虽然我能够使用效果从服务器检索数据，但似乎Datasource没有识别数据..我对此很新，这似乎我找不到任何人在这里遇到相同的，所以值得打字.. 请注意:::我的商店/效果没有问题，我能够从服务器检索数据。
见下面的代码。：
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>
答案 0 :(得分：1)
好的，经过一些自我回忆，我发现不仅需要订阅@effects才能在mat-table中显示 EmployeeModel [] ， 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);
});