正如标题中所述，我只是无法使它正常工作。看起来很简单。我只是按照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和filteredProductsObj（仅启用了产品）一起用作数据，但是它不能正常工作。
我在做什么错了？
预先感谢
答案 0 :(得分：0)
通过进行以下更改，我能够使所有工作正常进行。
首先，我声明了以下变量：
data;
第二，我将此变量设置为从服务返回的对象，并将所有内容放置在ngOnInit方法中：
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";
}
将html更新为以下内容，特别是mf.data的项目。另外，由于我仍在使用网站上的原始模板，因此本来就无法进行排序。我必须更改以匹配我的对象-例如，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>