json - Angular 6 错误:找不到“字符串”类型的不同支持对象
问题描述
正如您在主题中看到的那样,我收到此错误是因为数据库中的一列是 JSON 字符串,我认为可以通过在 ngFor 循环中使用 ngFor 循环来解决此问题。
以下是html:
<tbody>
<tr *ngFor="let item of mf.data">
<td>{{ item.id }}</td>
<td>{{ item.user_id }}</td>
<td class="text-right">{{ item.orders_id }}</td>
<td>
<ul *ngFor="let x of item.product">
<li>{{ x.name }}</li>
<li>{{ x.price }}</li>
<li>{{ x.category }}</li>
<li>{{ x.ts }}</li>
<li>{{ x.enabled }}</li>
<li>{{ x.counter }}</li>
</ul>
</td>
</tr>
</tbody>
以下是“产品”列的一行的样子:
[
{
"id": "13",
"name": "test 5",
"price": "3.42",
"category": "chocolates",
"ts": "2019-01-08 10:41:15",
"product_image_id": "50",
"enabled": "1",
"product_image": "40-64-grand-canyon.png",
"counter": "2"
},
{
"id": "18",
"name": "test 4 post dubs",
"price": "6.72",
"category": "chocolates",
"ts": "2019-01-08 08:55:49",
"product_image_id": "36",
"enabled": "1",
"product_image": "first-ent-rent-ridgegate.png",
"counter": "3"
},
{
"id": "9",
"name": "something test 3 upd",
"price": "12.23",
"category": "chocolates",
"ts": "2019-01-08 08:54:49",
"product_image_id": "29",
"enabled": "1",
"product_image": "80-44-grand-canyon.png",
"counter": "2"
}
]
顺便说一句,我尝试了以下方法,没有错误,但也没有任何显示:
<tbody>
<tr *ngFor="let item of mf.data">
<td>{{ item.id }}</td>
<td>{{ item.user_id }}</td>
<td class="text-right">{{ item.orders_id }}</td>
<td>
<ul *ngFor="let x of mf.data.product">
<li>{{ x.name }}</li>
<li>{{ x.price }}</li>
<li>{{ x.category }}</li>
<li>{{ x.ts }}</li>
<li>{{ x.enabled }}</li>
<li>{{ x.counter }}</li>
</ul>
</td>
</tr>
</tbody>
除了尝试以下,但未定义产品错误:
<tbody>
<tr *ngFor="let item of mf.data">
<td>{{ item.id }}</td>
<td>{{ item.user_id }}</td>
<td class="text-right">{{ item.orders_id }}</td>
<td>
<ul *ngFor="let x of mf.data[i].product; let i = index">
<li>{{ x.name }}</li>
<li>{{ x.price }}</li>
<li>{{ x.category }}</li>
<li>{{ x.ts }}</li>
<li>{{ x.enabled }}</li>
<li>{{ x.counter }}</li>
</ul>
</td>
</tr>
</tbody>
提前致谢
解决方案
这是因为product
对象未与其他给定数据一起转换为 JSON,因为它是嵌套对象。
在您的模板中,调用将product
字符串转换为JSON 对象的方法
<ul *ngFor="let x of convertToJSON(item.product)">
在您的组件中创建一个方法,如下所示
convertToJSON(product: any) {
return JSON.parse(product);
}
推荐阅读
- html - css剪辑路径部分圆圈
- ada - Ada 抱怨我在函数调用中添加了一个 volatile 对象而不是 volatile 的泛型类型
- r - cronR add_cron 在所有 Mac OS High Sierra 中都不执行脚本
- django - 如何在 Django Rest Framework 中保存外键字段
- javascript - 反应自定义钩子:无法获得异步功能
- date - 如何使用 unix 在一行 csv 文件中将 23/1/17 转换为 23/01/2017?
- r - 如何使用 list.files 对目录中的 .Rmd 文件进行子集化
- python - 使用带有参数的 Pandas 从 QuestDb 查询时间序列
- docusignapi - 有没有办法在信封(不带扩展名)中获取文档的文件类型?
- hadoop - 列出 HDFS 上 zip 文件的内容