angular10获取json数据并转为Model实体对象集合

我们有时希望像后端语言一样,让angular获取的网络json能够转化为一个数据entity的实体对象集合。

比如我们有一个json

对应每一个数据,我们为angular创建了一个实体

\src\app\model\news.model.ts

 

准备工作已经完毕,我们首先要网络获取这个json的数据。这个操作我们把它写在服务里

先创建一个服务

然后,在服务里

不要忘记在app.module.ts中引用HttpClientModule


好了,万事具备只欠东风,我们来使用之前服务里写好的getall方法吧

\src\app\newslist\newslist.component.ts

页面我是用的ngx-weui

我只替换了title,展示效果如下:

2020-10-21_150406

 

全局newslist变量

为了日后方便,我们将newslist变量放到服务中去,也就是让他在内存中保存下来,以方便其他页面调用newslist。

\src\app\service\news.service.ts

改写\src\app\newslist\newslist.component.ts

这里主要改了两个地方,

private变为了public为了模板可以访问

this.newslist 变为了给newsservice里的newslist赋值

如果你要追加新的数据可以这样

 

好了,该改写模板了

可以访问你的页面看看效果了。

其他页面获取这个newslist对象可以这样

 

完事!

发表评论