【发布时间】：2019-06-02 15:43:22
【问题描述】：
正如标题所述，我就是无法让它发挥作用。看起来很简单。我只是按照this link to the npm上的说明进行操作
以下是我做的一些bs数据：
[
{
"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"
}
]
顺便说一句，这是来自console.log 的JSON.stringyfied 数据，这是从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";
以下是显示数据的html，它显示数据，但它显示了所有数据。
<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>
我不明白我做错了什么。这应该很容易。我已经尝试将 productsObj 作为数据，以及过滤的ProductsObj（仅启用产品），但它不起作用。
我做错了什么？
提前致谢
【问题讨论】：