首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将从服务到数组的可观察值转换为Angular2中的ngFor?

在Angular2中,可以通过使用管道(pipe)来将从服务到数组的可观察值转换为ngFor。下面是一个完整的答案:

将从服务到数组的可观察值转换为Angular2中的ngFor,可以使用管道(pipe)来实现。管道是Angular中的一个特性,用于对数据进行转换和格式化。

首先,确保你已经导入了Observable和管道相关的依赖:

代码语言:typescript
复制
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

然后,在你的组件中,使用可观察值(Observable)来获取从服务返回的数据。假设你的服务方法是getData(),返回的是一个可观察值:

代码语言:typescript
复制
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app',
  template: `
    <ul>
      <li *ngFor="let item of data | async">{{ item }}</li>
    </ul>
  `,
  providers: [DataService]
})
export class AppComponent {
  data: Observable<any[]>;

  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}

在上面的代码中,我们使用了async管道来订阅可观察值并自动更新视图。dataService.getData()返回的是一个可观察值,我们将其赋值给data属性。

最后,在模板中使用*ngFor指令来循环遍历data数组,并显示每个项。

这是一个简单的示例,你可以根据实际需求进行修改和扩展。关于Angular2中的ngFor和可观察值的更多信息,你可以参考以下链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular2 VS Angular4 深度对比:特性、性能

接下来一起了解Angular2这个版本发布原因以及如何将其添加到Web开发。 ...指令: Angular2提供了三种指令:  组件指令:通过将逻辑封装在HTML,CSS和JavaScript,从而使得组件复用。...模板指令:可以将HTML转换为复用模板。该模板实例化以及插入DOM过程可以完全由指令创建者控制。例如ng-repeat和ng-if。...设计: 所有这些逻辑都是使用管道架构创建,这使得将自己操作添加到管道或删除默认操作变得非常简单。此外,它异步字符允许开发人员在管道,实现对用户进行身份验证或加载控件信息服务器请求。...记录: Angular 2.0包括一个名为diary.js日志记录服务,这是一个非常有用属性,用于测量开发人员编码投入时间(从而允许开发人员识别代码瓶颈)。

8.7K20
  • angular5面试题_大数据面试题

    依赖就是具有一系列功能服务(service), 应用程序各种组件和指令(derictives)可能需要服务功能。...脏检测基本原理是存储旧数值,并在进行检测时,把当前时刻和旧比对。若相等则没有变化,反之则检测到变化,需要更新视图。 angular2有了Zone.js。...可以采用如下方式避免 对于只用于展示数据,使用单向绑定,而不是双向绑定; Angular数据流是自顶而下,从父组件子组件单向流动。单向数据流向保证了高效、预测变化检测。...表达式(以及表达式所调用函数)少写太过复杂逻辑 不要连接太长 pipe(往往 pipe里都会遍历并且生成新数组, pipe 在anglarJS(v1)叫做filter) 变化检测策略onPush...否则,每次脏检测过程NgFor会把列表里每一项都执行更新DOM操作。

    4.3K20

    Angular 2 架构(下)

    每种形式都有一个方向——从 DOM 来、 DOM 去、双向,就像图中箭头所示意。 插 : 在 HTML 标签显示组件。... {{title}} 属性绑定: 把元素属性设置为组件属性。...---- 服务(Services) Angular2服务是封装了某一特定功能,并且可以通过注入方式供他人使用独立模块。 服务分为很多种,包括:、函数,以及应用所需特性。...通过控制反转,对象在被创建时候,由一个调控系统内所有对象外界实体,将其所依赖对象引用传递给它。也可以说,依赖被注入对象。...注入器是一个维护服务实例容器,存放着以前创建实例。 如果容器还没有所请求服务实例,注入器就会创建一个服务实例,并且添加到容器,然后把这个服务返回给 Angular 。

    2.2K20

    Angular 2 + 折腾记 :(2)初步认识angular2,不一样开发模式

    ---- 基础概念 国内官网--基础 词汇表(又名计算机术语--angular2 & es6 & es7) 速查表:又名demo写法表,里面涵盖了很多写法,相当于一本小字典 关于ng2一堆为什么:..., |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道参数,后续文档我写一个如何自定义管道文章 []="":绑定组件内[单向,数据流向视图],指令,原生html控件自身属性[value...,用来动态判断增加多个样式 [class.a]或者[style.font-size]:单一操作类或者某个行内样式 数据遍历(*ngFor) *ngFor="let i of item; let index...= index": 可以用这个来遍历数组对象,let index = index意思是创建一个局部遍历把当前遍历索引保存到你自定义变量index 动态渲染(*ngIf) *ngIf="item"...: 比如loading视图全部渲染就经常用到这个,当前不在乎低版本可以用[hidden]来控制切换,因为*ngIf这种动态渲染节点还是有一定性能消耗。。

    6.2K20

    Angular2 之 Animations

    Angular2动画系统赋予了制作各种动画效果能力,致力于构建出与原生CSS动画性能相同动画。 Angular2动画主要是和@Component结合在了一起。...使用要点 Angular2动画是使用模型驱动方式在两个状态之间进行转换,是由状态和状态之间转场效果所定义。 动画被定义在@Component元数据。...可以把它添加到字符串持续时间后面,它选项格式也跟持续时间是一样: 等待100毫秒,然后运行200毫秒:'0.2s 100ms'。 缓动函数 缓动函数用于控制动画在运行期间如何加速和减速。...·函数意味着动画开始时相对缓慢,然后在进行逐步加速。可以通过在这个字符串持续时间和延迟后面添加第三个来控制使用哪个缓动函数(如果没有定义延迟就作为第二个)。...偏移量是一个介于0(表示动画起点)和1(表示动画终点)之间数组。 ?

    1.9K10

    Angular 2 + 折腾记 :(3)初步了解服务及使用

    前言 不探究高深理论,只探究实际使用,有更好写法或者经验请指出; 有些暂时没涉及知识我可能会顺着例子解释; ---- 什么是服务 简言之:就是资源获取,以及通讯逻辑处理地方; Angular2...服务引入了依赖注入这个概念。...详情看这个; 【依赖注入:】 【依赖注入:英】 我看github上有些项目的service写很复杂(很重),但是我不大喜欢这样。 我力求service内少处理复杂逻辑。...{ return this.authHttp.post(environment.baseUrl + 'VehicleFault/ClearFault', data); } // 这里每个接口返回一个可观察订阅对象...}复制代码 那么我们应该如何服务可以正常使用呢?

    1.6K20

    实战 | Change Detection And Batch Update

    开发,当与用户或服务器发生交互时,需要我们手动获取数据并更新DOM,这个过程是繁琐、易错。...那么这里就有两个很重要问题了:当数据变化时,这些框架/库是如何感知?当我们连续更新数据时,这些框架/库如何避免连续更新DOM,而是进行批量更新?...如果仔细观察的话,你会发现上面的输出符合一个规律:在React调用方法连续setState走是批量更新,此外走是连续更新。...Angular1 Dirty Checking Angular1通过脏检测去更新UI,所谓检测其实指Angular1从$rootScope开始遍历所有scope$$watchers数组,通过比较新老来决定是否更新...异步更新队列 每当观察数据变化时,Vue就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个watcher被多次触发,只会推入一次队列

    3.2K20

    AngularJS2.0 教程系列(一)

    Angular团队希望在Angular2将复杂性 封装地更好一些,让暴露出来概念和开发接口更简单。 ?...等各种格式JS模块加载 es6-module-loader - ES6模块加载器,systemjs会自动加载这个模块 traceur - ES6码器,将ES6代码转换为当前浏览器支持ES5...@Component最重要作用是通过selector属性(为CSS选择符),指定这个组件渲染哪个DOM对象上。 @View最重要作用是通过template属性,指定渲染模板。 3....渲染组件DOM 将组件渲染DOM上,需要使用自举/bootstrap函数: bootstrap(EzApp); 这个函数作用就是通知Angular2框架将EzApp组件渲染DOM树上。...,可能隐约会感受到Angular2bootstrap一些 变化 - 我指并非代码形式上变化。

    2.4K10

    Change Detection And Batch Update

    本文作者:IMWeb 吴浩麟 原文出处:IMWeb社区 未经同意,禁止转载 前言 在传统WEB开发,当与用户或服务器发生交互时,需要我们手动获取数据并更新DOM,这个过程是繁琐、易错。...那么这里就有两个很重要问题了:当数据变化时,这些框架/库是如何感知?当我们连续更新数据时,这些框架/库如何避免连续更新DOM,而是进行批量更新?...如果仔细观察的话,你会发现上面的输出符合一个规律:在React调用方法连续setState走是批量更新,此外走是连续更新。...Angular1通过脏检测去更新UI,所谓检测其实指Angular1从$rootScope开始遍历所有scope$$watchers数组,通过比较新老来决定是否更新DOM。...异步更新队列 每当观察数据变化时,Vue就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个watcher被多次触发,只会推入一次队列

    3.7K70

    Change Detection And Batch Update

    那么这里就有两个很重要问题了:当数据变化时,这些框架/库是如何感知?当我们连续更新数据时,这些框架/库如何避免连续更新DOM,而是进行批量更新?...如果仔细观察的话,你会发现上面的输出符合一个规律:在React调用方法连续setState走是批量更新,此外走是连续更新。...Angular1通过脏检测去更新UI,所谓检测其实指Angular1从$rootScope开始遍历所有scope$$watchers数组,通过比较新老来决定是否更新DOM。...get 获取当前数据 last 老数据 那么Angular1是如何感知数据变化呢?...异步更新队列 每当观察数据变化时,Vue就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个watcher被多次触发,只会推入一次队列

    3.3K40

    Angular 6.x 基础教程

    指令 在 Angular 我们可以使用 ngFor 指令来显示数组每一项信息。...,我们使用 let item of items; 语法迭代数组每一项,另外我们使用 index as i 用来访问数组每一项索引。...除了 index 外,我们还可以获取以下: first: boolean —— 若当前项是迭代对象第一项,则返回 true last: boolean —— 若当前项是迭代对象最后一项,则返回...true even: boolean —— 若当前项索引是偶数,则返回 true odd: boolean —— 若当前项索引是奇数,则返回 true 需要注意是,*ngFor * 号是语法糖...需要注意是,当 SimpleFormComponent 组件类属性名称不是 message 时,我们需要告诉 Angular 如何进行属性绑定,具体如下: export class SimpleFormComponent

    15.6K20

    AngularDart4.0 英雄之旅-教程-04明细 顶

    Web服务获取英雄列表,但现在你可以显示模拟英雄。...应用hero字段 将hero字段替换为AppComponent公共heros字段,并使用模拟英雄进行初始化(不要忘记导入):lib/app_component.dart (heroes) import...在模板显示英雄名称  要在无序列表显示英雄名称,请将所有当前模板替换为以下HTML:lib/app_component.html (heroes template) {{title}} 下一步你将添加英雄名字 使用ngFor指令罗列英雄 目标是将组件英雄列表绑定模板,迭代它们,并单独显示它们。...您将Hero类移到lib / src下自己文件。 你增加了选择英雄和显示英雄细节能力。 您了解了如何在组件模板中使用核心指令ngIf和ngFor

    3K30

    Angular 服务

    不要使用 new 来创建此服务,而要依靠 Angular 依赖注入机制把它注入 HeroesComponent 构造函数服务是在多个“互相不知道”类之间共享信息好办法。...这个就是这些模拟英雄数组。...在 HTTP 教程,你将会调用 HttpClient.get() 它也同样返回一个 Observable,它也会发出单个,这个就是来自 HTTP 响应体英雄数组...上一个版本把英雄数组赋值给了该组件 heroes 属性。 这种赋值是同步,这里包含假设是服务器能立即返回英雄数组或者浏览器能在等待服务器响应时冻结界面。...创建一个注入、全应用级别的 MessageService,用于发送要显示消息。 把 MessageService 注入 HeroService 

    3.3K70

    Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

    Angular应用程序具有路由器服务单个实例,并且每当URL改变时,相应路由就与路由配置数组进行匹配。...在Angular2,组件中发生任何改变总是从当前组件传播到其所有子组件。如果一个子组件更改需要反映其父组件层次结构,我们可以通过使用事件发射器api来发出事件。...这通常用在setter,当类被更改完成时。 可以通过模块任何一个组件,使用订阅方法来实现事件发射订阅。...编译好HTML和JavaScript将会部署Web服务器,以便浏览器可以节省编译和渲染时间。...但是预编译应用程序会将所有模板和样式与组件对齐,因此服务Http请求数量会更少。 更快渲染:如果应用程序不是AOT编译,那么应用程序完全加载时,编译过程会发生在浏览器

    17.3K80

    Angular 自定义管道

    本文将使用 UltimateAngular/angular-pro-src 示例,来一步步介绍自定义管道相关知识。...size: 18029, type: 'image/jpg' }, { name: 'background.png', size: 1784562, type: 'image/png' } ]; 上面数组每一项表示一个文件信息...,含有以下字段: name —— 文件名称 size —— 文件大小(字节) type —— 文件类型 接下来我们需要实现功能,是在显示文件信息时,把字节(Byte)转换为兆(MB)。...(Byte)转换为 兆(MB),需要注意是要处理小数位,这里我们只保留两位小数: import { Pipe, PipeTransform } from '@angular/core'; @Pipe...下面我们来介绍在组件类如何使用管道服务: 配置 Provider: import { FilesizePipe } from '.

    1.5K20
    领券