Dear Sir/Madam,
I have a form with a Mat-Table. I have attached a Mat-Paginator to the
Mat-Table. However, the MAt-Paginator does not work. Please help.
Regards,
Partha
*The HTML Code is as follows:*
<td valign="top">
<table mat-table [dataSource]="listData" class="mat-elevation-z8" width=
"100%">
<ng-container matColumnDef="asOfDate">
<th mat-header-cell *matHeaderCellDef> As Of Date</th>
<td mat-cell *matCellDef="let elem" align="left"> {{elem.asOfDate |
date:'dd-MMM-yyyy'}} </td>
</ng-container>
<ng-container matColumnDef="exchangeRate">
<th mat-header-cell *matHeaderCellDef> Exchange Rate </th>
<td mat-cell *matCellDef="let elem" align="left"> {{elem.exchangeRate |
number:'1.4-4'}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #exchangeRateList [pageSizeOptions]="[7]"
showFirstLastButtons></mat-paginator>
</td>
*The Paginator declaration in .TS file is as follows:*
@ViewChild('exchangeRateList', {read: MatPaginator})
exchangeRateListPaginator: MatPaginator;
*The relevant code in the .TS file is as follows:*
ngOnInit() {
this.isLoading = true;
this.dataForm = new FormGroup({
'currencyCode': new FormControl(null, {validators: [Validators.required,
Validators.maxLength(4)]}),
'asOfDate': new FormControl(null, {validators: [Validators.required,
Validators.maxLength(20)]}),
'exchangeRate': new FormControl(null, {validators: [Validators.required,
Validators.maxLength(10)]}),
'lastUpdateDate': new FormControl(null, {validators: [Validators.required,
Validators.maxLength(20)]}),
'updateUser': new FormControl(null, {validators: [Validators.maxLength(20
)]})
});
this.route.paramMap
.subscribe(
(paramMap) => {
if (paramMap.has('currencyCode')) {
this.currencyCode = paramMap.get('currencyCode');
this.httpClient
.get<{message: string, values: CurrencyWithExchangeRate[], recordGoodCount:
number}>(
this.dataService.baseURL + '/' + this.dataService.serviceRoute + '/getOne'
+ '/' + this.currencyCode)
.subscribe(
(returnValue) => {
this.exchangeRateList = returnValue.values[0].exchangeRates;
this.listData.data = this.exchangeRateList;
this.listData.paginator = this.exchangeRateListPaginator;
if (this.exchangeRateList.length > 0) {
for (let i = 0; i < this.exchangeRateList.length; i++) {
this.exchangeRateArray[i] = 0;
}
for (let i = 0; i < this.exchangeRateList.length; i++) {
this.exchangeRateArray[this.exchangeRateList.length - i - 1] = this.
exchangeRateList[i].exchangeRate;
}
}
if (paramMap.has('asOfDate')) {
this.mode = this.EDIT_MODE_INDICATOR;
this.asOfDate = new Date(paramMap.get('asOfDate'));
alert(this.asOfDate);
this.dataService.getOneData(this.currencyCode, this.asOfDate)
.subscribe(
(fetchedData) => {
this.dataToEdit = fetchedData.data;
this.dataForm.setValue({
'currencyCode': this.currencyCode,
'asOfDate': this.dataToEdit.asOfDate,
'exchangeRate': this.dataToEdit.exchangeRate,
'lastUpdateDate': this.dataToEdit.lastUpdateDate,
'updateUser': this.dataService.loggedInUser
});
this.isLoading = false;
},
(error) => {
// alert('Code: ' + this.dataCode + ' not found in System. Redirecting to
List');
this.router.navigate([this.dataService.frontEndRouteToNavigate]);
}
);
} else {
this.mode = this.CREATE_MODE_INDICATOR;
this.dataCode = null;
this.dataToEdit = dummyData;
this.dataForm.setValue({
'currencyCode': this.currencyCode,
'asOfDate': new Date(Date.now()),
'exchangeRate': dummyData.exchangeRate,
'lastUpdateDate': dummyData.lastUpdateDate,
'updateUser': this.dataService.loggedInUser
});
this.selectedValue = '';
this.isLoading = false;
}
}
);
}
}
);
this.listData.data = this.exchangeRateList;
this.listData.paginator = this.exchangeRateListPaginator;
this.isUserAuthenticated = this.generalService.getIsUserAuthenticated();
this.authStatusSubscription = this.generalService
.getAuthStatusListener()
.subscribe(
(isAuthenticated) => {
this.isLoading = false;
this.isUserAuthenticated = isAuthenticated;
}
);
}
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
