Question

正如您所看到的那样，我收到此错误是因为数据库中的一列是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>

预先感谢

Answer 1

在模板中调用将 product 字符串转换为 JSON对象

的方法

<ul *ngFor="let x of ConvertToJSON (item.product)">

在ts文件中创建方法

ConvertToJSON(product: any) {
    return JSON.parse(product);
}

Answer 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 item">
            <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>

使用 * ngFor =“物品的let x” 插入* ngFor =“物品的let x。”

Angular 6错误：找不到类型为“字符串”的其他支持对象

2 个答案: