Angular 6错误:找不到类型为'string'的其他支持对象 [英] Angular 6 Error: Cannot find a differ supporting object of type 'string'

问题描述

正如您所看到的那样，我收到此错误是因为数据库中的一列是JSON字符串，我认为我可以通过在ngFor循环中包含ngFor循环来解决此问题.

As you can see by the subject, I am receiving this error because one of the columns in the database is a string of JSON and I thought I could get around this by having an ngFor loop within an ngFor loop.

以下是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>

以下是产品"列的一行:

The following is what one row of the column "product" looks like:

 [
  {
    "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"
  }
]

顺便说一句，我尝试了以下操作，没有错误，但也没有显示任何内容:

BTW, I have tried the following, with no errors, but nothing displays as well:

 <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>

尝试以下操作，但未定义产品错误:

Along with trying the following, but errors of product not being defined:

<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对象

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

在ts文件中创建一个方法

Create a method in your ts file

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

这篇关于Angular 6错误:找不到类型为'string'的其他支持对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！