title: Angular 6 Error: Cannot find a differ supporting object of type 'string'
body: <p>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.</p>
  
  <p>The following is the html:</p>
  
  <pre><code> &lt;tbody&gt;
    &lt;tr *ngFor="let item of mf.data"&gt;
      &lt;td&gt;{{ item.id }}&lt;/td&gt;
      &lt;td&gt;{{ item.user_id }}&lt;/td&gt;
      &lt;td class="text-right"&gt;{{ item.orders_id }}&lt;/td&gt;
      &lt;td&gt;
        &lt;ul *ngFor="let x of item.product"&gt;
          &lt;li&gt;{{ x.name }}&lt;/li&gt;
          &lt;li&gt;{{ x.price }}&lt;/li&gt;
          &lt;li&gt;{{ x.category }}&lt;/li&gt;
          &lt;li&gt;{{ x.ts }}&lt;/li&gt;
          &lt;li&gt;{{ x.enabled }}&lt;/li&gt;
          &lt;li&gt;{{ x.counter }}&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>The following is what one row of the column "product"  looks like:</p>
  
  <pre><code> [
    {
      "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"
    }
  ]
  </code></pre>
  
  <p>BTW, I have tried the following, with no errors, but nothing displays as well:</p>
  
  <pre><code> &lt;tbody&gt;
    &lt;tr *ngFor="let item of mf.data"&gt;
      &lt;td&gt;{{ item.id }}&lt;/td&gt;
      &lt;td&gt;{{ item.user_id }}&lt;/td&gt;
      &lt;td class="text-right"&gt;{{ item.orders_id }}&lt;/td&gt;
      &lt;td&gt;
        &lt;ul *ngFor="let x of mf.data.product"&gt;
          &lt;li&gt;{{ x.name }}&lt;/li&gt;
          &lt;li&gt;{{ x.price }}&lt;/li&gt;
          &lt;li&gt;{{ x.category }}&lt;/li&gt;
          &lt;li&gt;{{ x.ts }}&lt;/li&gt;
          &lt;li&gt;{{ x.enabled }}&lt;/li&gt;
          &lt;li&gt;{{ x.counter }}&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>Along with trying the following, but errors of product not being defined:</p>
  
  <pre><code>&lt;tbody&gt;
    &lt;tr *ngFor="let item of mf.data"&gt;
      &lt;td&gt;{{ item.id }}&lt;/td&gt;
      &lt;td&gt;{{ item.user_id }}&lt;/td&gt;
      &lt;td class="text-right"&gt;{{ item.orders_id }}&lt;/td&gt;
      &lt;td&gt;
        &lt;ul *ngFor="let x of mf.data[i].product; let i = index"&gt;
          &lt;li&gt;{{ x.name }}&lt;/li&gt;
          &lt;li&gt;{{ x.price }}&lt;/li&gt;
          &lt;li&gt;{{ x.category }}&lt;/li&gt;
          &lt;li&gt;{{ x.ts }}&lt;/li&gt;
          &lt;li&gt;{{ x.enabled }}&lt;/li&gt;
          &lt;li&gt;{{ x.counter }}&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>Thanks in advance</p>