angular6与angular4数据转换成json问题。

前言：在初步学习angular6的过程中，因为是在是太新了，2018.05刚出了angular6，我是8月份刚学习，没有相应的教学视频，只能通过学习angular4再去看angular6的快速开发文档

https://angular.cn/tutorial/toh-pt2#style-the-heroes

因为我发现如果直接看文档，对于16年才碰过angular1的人，直接跳到angular6真的接受不能，完全不理解是怎么运转的，期间就发现我直接用angular4的map方法去转换数据成json格式会报错。

看了很多篇文章，有人说我improt错了，我也改成相应的import

但是还是不行map方法还是飘红，后来通过一位博客主的文章我才明白，版本不同方法实现也发生了变化，下面就是它的文章链接，有兴趣的人可以看一下

https://blog.csdn.net/afjaklsdflka/article/details/81276048

搜到他文章的启发我将我的代码改成了下面的样子：

而对应我的html内容如下

<p>
  商品信息
</p>
<ul>
  <li *ngFor="let product of products">
    商品ID：<span>{{product.id}}</span>
    商品标题：<span>{{product.title}}</span>
    商品价格：<span>{{product.price}}</span>
    商品评分：<span>{{product.rating}}</span>
    商品描述：<span>{{product.desc}}</span>
    商品种类：<span>{{product.categories}}</span>
    <hr>
  </li>
</ul>

 

浏览器显示效果如下：

-----------------------------------------------------------------------------------------------------

如果大家是使用管道去接接口的话demo如下：

html页面中

ts文件中

实际效果是一样的。

哈哈终于好了，控制台也不报map错误，结果也正常显示出来了，万岁！！感谢那位博主，解决方法搜索了很久。