问题
Just as the title states, I just cannot get this to work. It seems so simple. I just follow the instructions on this link to the npm
The following is some bs data that I made:
[
{
"id": "8",
"name": "Austin to Carls 32 to 33 chocolates to oil",
"price": "9.67",
"category": "oils",
"ts": "2019-01-06 19:31:45",
"product_image_id": "33",
"enabled": "0",
"product_image": "Austin-183-84-62-carlsbad.png"
},
{
"id": "9",
"name": "something test 3 upd",
"price": "12.23",
"category": "chocolates",
"ts": "2019-01-05 06:54:40",
"product_image_id": "28",
"enabled": "0",
"product_image": "40-64-grand-canyon.png"
},
{
"id": "11",
"name": "Test post this.productModel",
"price": "24.96",
"category": "toys",
"ts": "2019-01-06 19:36:59",
"product_image_id": "34",
"enabled": "0",
"product_image": "roswell-285-40-arizona.png"
},
{
"id": "13",
"name": "test 5",
"price": "3.42",
"category": "chocolates",
"ts": "2019-01-05 08:06:11",
"product_image_id": "35",
"enabled": "1",
"product_image": "grand-canyon-northridge.png"
},
{
"id": "15",
"name": "Test post to not dup empty row",
"price": "4.56",
"category": "candles",
"ts": "2019-01-05 08:29:50",
"product_image_id": "36",
"enabled": "1",
"product_image": "40-64-grand-canyon.png"
},
{
"id": "17",
"name": "testing",
"price": "4.57",
"category": "chocolates",
"ts": "2019-01-05 08:39:02",
"product_image_id": "37",
"enabled": "1",
"product_image": "Austin-183-84-62-carlsbad.png"
},
{
"id": "18",
"name": "test 4 post dubs",
"price": "6.72",
"category": "chocolates",
"ts": "2019-01-05 08:48:17",
"product_image_id": "38",
"enabled": "1",
"product_image": "carlsbad-285-roswell.png"
},
{
"id": "19",
"name": "test 5 isset post",
"price": "6.78",
"category": "toys",
"ts": "2019-01-05 09:46:37",
"product_image_id": "40",
"enabled": "1",
"product_image": "first-ent-rent-ridgegate.png"
},
{
"id": "20",
"name": "test 5 isset post to update",
"price": "6.78",
"category": "toys",
"ts": "2019-01-05 09:47:49",
"product_image_id": "40",
"enabled": "1",
"product_image": "first-ent-rent-ridgegate.png"
},
{
"id": "23",
"name": "testing product w jwt",
"price": "12.34",
"category": "toys",
"ts": "2019-01-05 13:51:08",
"product_image_id": "30",
"enabled": "1",
"product_image": "crater-winslow-40.png"
},
{
"id": "24",
"name": "testing product w jwt",
"price": "12.34",
"category": "toys",
"ts": "2019-01-05 13:52:22",
"product_image_id": "30",
"enabled": "1",
"product_image": "crater-winslow-40.png"
},
{
"id": "25",
"name": "testing product w jwt",
"price": "12.34",
"category": "toys",
"ts": "2019-01-05 13:56:19",
"product_image_id": "30",
"enabled": "1",
"product_image": "crater-winslow-40.png"
},
{
"id": "26",
"name": "test with jwt from app",
"price": "8.34",
"category": "candles",
"ts": "2019-01-05 15:55:31",
"product_image_id": "44",
"enabled": "1",
"product_image": "app-comp-return-url-local-storage-getItem.png"
},
{
"id": "27",
"name": "test 10 jwt",
"price": "10.56",
"category": "oils",
"ts": "2019-01-05 22:24:07",
"product_image_id": "45",
"enabled": "1",
"product_image": "return-url-local-storage-setItem.png"
},
{
"id": "28",
"name": "test 11 jwt",
"price": "10.99",
"category": "toys",
"ts": "2019-01-05 22:30:13",
"product_image_id": "46",
"enabled": "0",
"product_image": "app-comp-return-url-local-storage-getItem.png"
},
{
"id": "29",
"name": "Some new prod testing enabled",
"price": "1.99",
"category": "candles",
"ts": "2019-01-06 19:40:14",
"product_image_id": "48",
"enabled": "1",
"product_image": "business_cards_2.png"
}
]
BTW, this is the data from console.log that was JSON.stringyfied, which is what was returned from the db
The following is from the component in the constructor, where I retrieve the data from the db:
this.prdSrvc.getAllProducts().subscribe(resProd => {
this.mfData = this.filteredProductsObj = this.productsObj =
resProd.products;
console.log("resProd.products: ", JSON.stringify(resProd.products));
});
this.mfActivePage = 1;
this.mfRowsOnPage = 5;
this.mfSortBy = "names";
The following is the html to display the data, which does the display the data, but it displays all of it.
<table
class="table table-striped"
[mfData]="mfData"
#mf="mfDataTable"
[mfRowsOnPage]="mfRowsOnPage"
>
<thead>
<tr>
<th style="width: 20%">
<mfDefaultSorter by="name">Name</mfDefaultSorter>
</th>
<th style="width: 50%">
<mfDefaultSorter by="email">Price</mfDefaultSorter>
</th>
<th style="width: 10%">
<mfDefaultSorter by="age">Category</mfDefaultSorter>
</th>
<th style="width: 20%">
<mfDefaultSorter by="city">Thumbnail</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of mfData">
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td class="text-right">{{ item.category | uppercase }}</td>
<td>
<img
height="100px"
src="{{ oshopUrl + 'uploads/' + item.product_image }}"
alt=""
/>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<mfBootstrapPaginator
[rowsOnPageSet]="[5, 10, 25]"
></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
I do not understand what I could be doing wrong. This should be so easy. I have tried the productsObj as data, along with the filteredProductsObj (only products enabled), but it is just not working.
What am I doing wrong?
Thanks in advance
回答1:
I was able to make everything work, by making the following changes.
First, I declared the following variable:
data;
Second, I set this variable to the object returning from the service and I placed everything within the ngOnInit method:
ngOnInit() {
this.prdSrvc.getAllProducts().subscribe(resProd => {
this.data = this.filteredProductsObj = this.productsObj =
resProd.products;
// console.log("resProd.products: ", JSON.stringify(resProd.products));
});
this.mfActivePage = 1;
this.mfRowsOnPage = 5;
this.mfSortBy = "names";
}
Updated the html to the following, specifically let item of mf.data. Also, my sort was originally off because I was still using the original template from the web site. I had to change to match my object - for instance, mfDefaultSorter by="product_image"
<table
class="table table-striped"
[mfData]="filteredProductsObj"
#mf="mfDataTable"
[mfRowsOnPage]="mfRowsOnPage"
>
<thead>
<tr>
<th style="width: 20%">
<mfDefaultSorter by="name">Name</mfDefaultSorter>
</th>
<th style="width: 50%">
<mfDefaultSorter by="price">Price</mfDefaultSorter>
</th>
<th style="width: 10%">
<mfDefaultSorter by="category">Category</mfDefaultSorter>
</th>
<th style="width: 20%">
<mfDefaultSorter by="product_image">Thumbnail</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of mf.data">
<td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td class="text-right">{{ item.category | uppercase }}</td>
<td>
<img
height="100px"
src="{{ oshopUrl + 'uploads/' + item.product_image }}"
alt=""
/>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<mfBootstrapPaginator
[rowsOnPageSet]="[5, 10, 25]"
></mfBootstrapPaginator>
</td>
</tr>
</tfoot>
</table>
来源：https://stackoverflow.com/questions/54083489/angular-6-datatable-sorting-rows-per-page-and-pagination-not-working