您可以通过将HTML模板中的控件绑定到Angular组件的属性来显示数据。 在这个页面中，您将创建一个包含英雄列表的组件。 您将显示英雄名单的列表，并有条件地在列表下方显示一条消息。...在任一种样式中，模板数据绑定都具有对组件属性的相同访问权限。 用* ngFor显示一个列表属性 要显示英雄列表，首先向组件添加英雄名字列表，并将myHero重新定义为列表中的第一个名字。...在这种情况下，ngFor正在显示一个列表，但ngFor可以为任何Iterable对象重复项目。 @Component（directives：...）...当组件的英雄列表中有三个以上的项目时，Angular会将该段落添加到DOM，并显示消息。 如果有三个或更少的项目，Angular会忽略该段落，所以不会显示任何消息。...Angular没有显示和隐藏消息。 它正在添加和删除DOM中的段落元素。 这可以提高性能，特别是在大型项目中，当有条件地包含或排除大量的HTML与许多数据绑定。 试试看。
例如，这个HeroListComponent有一个heroes属性，返回从服务中获取的英雄列表。...HeroDetailComponent（代码未显示）显示关于特定英雄的详情，这是用户从HeroListComponent提供的列表中选择的英雄。...providers：组件需要的服务的依赖注入提供者列表。 这是告诉Angular这个组件的构造函数需要HeroService的一种方法，这样它就可以获得显示的英雄列表。 ?...= null"> * ngFor告诉Angular在英雄列表中标出每个英雄的一个。 * ngIf仅在选择的英雄存在时才包含HeroDetail组件。...服务 ? 服务是一个广泛的类别，包含您的应用程序所需的任何值，功能或特征。 几乎任何东西都可以成为服务。 服务通常是一个狭义的，明确的目的。 它应该做一些具体的事情，并做好。
这很有用，因为当服务端提供一个 User 实例数据给你，它只能返回字符串类型的时间给你，但是你可能有一个 datepicker 控件，它将日期作为有效的 JS Date 对象返回，并且为了避免数据被误解...我们知道一个路由对应一个 Angular 组件，但是我推荐你使用容器组件，它将处理数据（如果有数据需要传递的话）并将数据传递给另外一个组件，该组件将使用输入所包含的真实视图和 UI 逻辑。...服务 Services 服务是 Angular 中业务逻辑存放和数据处理的方案。拥有提供数据访问、数据操作和其他可重用逻辑的结构良好的服务非常重要。...现在，这些没有涉及到逻辑，不会以任何的方式影响你的视图，并且你的多个组件中都包含上传文件功能，因此，我们要考虑创建 Utilities 方法或者 DataHelper 服务将此类功能移到那里。...比如，你的 API 提供了一个接入点，返回一个 Country 对象 JSON 对象，你可以在应用程序使用这列表数据实现选择国家/地区的功能。
删除英雄更新模型，可能会触发其他更改，包括查询并保存到远程服务器。 这些变化通过系统渗透，并最终显示在相关视图。 双向绑定([(…)]) 您经常希望显示数据属性，并在用户进行更改时更新该属性。...NgFor NgFor是一个迭代指令 - 一种呈现项目列表的方式。 您可以定义一个HTML块来定义应该如何显示单个项目。 您告诉Angular将该块用作呈现列表中每个项目的模板。...例如，重新查询服务器可能会重置所有新的英雄对象的列表。 大多数，如果不是全部，以前显示的英雄。 你知道这一点，因为每个英雄的ID没有改变。 但是Angular只能看到新的对象引用列表。...例如，您可以将数字显示为货币，强制文本为大写，或筛选列表并对其进行排序。 对于这些小型转换来说，Angular 管道是一个很好的选择。 管道是简单的函数，它接受一个输入值并返回一个转换后的值。...The title is {{title}} 视图仍然呈现，但显示的值是空白的; 你只看到“The title is”没有任何东西。 这是合理的行为。 至少该应用程序不会崩溃。
在本页面，你将扩展《英雄指南》应用，让它显示一个英雄列表， 并允许用户选择一个英雄，查看该英雄的详细信息。 创建模拟（mock）英雄数据 你需要一些英雄数据以供显示。...最终，你会从远端的数据服务器获取它。但是目前，你需要创建一些模拟英雄（some mock heroes），并假设这些数据是从远程服务器上获取的。...它会为列表中的每项数据复写它的宿主元素。 在这个例子中 就是 *ngFor 的宿主元素 heroes 就是来自 HeroesComponent 类的列表。...但那个样式表并不包含英雄列表所需的样式。 固然，你可以把更多样式加入到 styles.css，并且放任它随着你添加更多组件而不断膨胀。 但还有更好的方式。...你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 的样式类。
它们都可用于任何模板。 在API参考的管道主题中了解更多关于这些和许多其他内置管道的信息; 过滤包含单词“管道”的条目。...您必须将自定义管道包含在@Component的pipes列表中。 记住管道列表 您必须手动注册自定义管道。 如果您不这样做，Angular会报告错误。...虽然你没有得到你想要的行为，但Angular并没有被破坏。 它只是使用不同的变更检测算法，忽略对列表或其任何项目的更改。...管道的数据请求断点显示如下： 每个绑定都有自己的管道实例。 每个管道实例都缓存自己的URL和数据。 每个管道实例只调用一次服务器。...虽然有些人可能并不在意这种积极的态度，但Angular的产品不应该阻止任何人积极贬低。 因此，Angular团队决定Angular提供的所有内容都将安全地缩小。
响应JSON有一个单一的数据属性，它拥有主叫方想要的英雄列表。 所以你抓住这个列表并把它作为已解决的Future值返回。 请注意服务器返回的数据的形状。...该代码还包含传播异常给调用者的错误，以便调用者可以向用户显示适当的错误消息。...未更改的getHeroes API 尽管您对getHeroes（）和getHero（）做了重大的内部更改，但公共签名没有更改。 你仍然从这两种方法返回一个未来。 您不必更新任何调用它们的组件。...当应用程序使用模拟英雄列表时，更新直接应用于单个应用程序范围的共享列表中的英雄对象。 现在，您正在从服务器获取数据，如果您希望更改持续存在，则必须将其写回服务器。...正如所料，* ngFor从组件的英雄属性重复英雄对象。 但正如你很快就会看到的，英雄的财产现在是一个英雄列表的流，而不仅仅是一个英雄名单。
，因为英雄名字最终将来自数据服务。 ...ngFor指令遍历组件的英雄列表并为该列表中的每个英雄呈现该模板的一个实例。 表达式部分将hero标识为模板输入变量，其中包含每个迭代的英雄详情。...在显示数据的Showing a list property with *ngFor部分阅读更多关于ngFor和模板输入变量和模板语法页的ngFor部分 在节点内添加内容hero模板变量来显示英雄属性...' of undefined in [null] 尽管selectedHero.name显示在模板中，但必须保留DOM外的英雄详细信息，直到出现选定的英雄。...在结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和ngFor的更多信息。 格式化选中hero 当选择的英雄细节显示在列表下方时，很难在列表中识别选定的英雄。
Angular不断检查可能会影响数据绑定的更改。 无论组件在做什么，它都会继续这样做。 虽然看不见，但组件及其所有后代组件都会占用资源。 性能和记忆负担可能很大，响应性可能会降低，用户什么也看不到。...NgFor指令具有比本指南中显示的NgIf更多的功能，包括必需的和可选的。 至少NgFor需要一个循环变量（let hero）和一个列表（heroes）。...每个宿主元素一个结构指令 有一天你会想重复一段HTML，但只有当特定条件成立时才会重复。 您将尝试将*ngFor和*ngIf放在同一宿主元素上。 Angular不会允许。...满足Angular模板中的类似需求。 编写一个结构指令 在本节中，您将编写一个与NgIf相反的UnlessDirective结构指令。 NgIf在条件为true时显示模板内容。...UnlessDirective在条件为false时显示内容。
您为model和power定义了模拟数据。 顺便说一句，您可以注入数据服务来获取和保存真实数据，或者将这些属性作为输入和输出（请参阅“模板语法”页面中的输入和输出属性）来绑定到父组件。...使用* ngFor添加powers 英雄必须从一个固定的机构批准的权力列表中选择一个超级大国。 您在内部维护该列表（在HeroFormComponent中）。...您将在表单中添加一个select，并使用ngFor（先前在“显示数据”页面中看到的一种技术）将选项绑定到powers列表。...任何唯一值将会这样做，但使用描述性名称是有帮助的。 将[（ngModel）]与表单结合使用时，定义ngControl指令是一项要求。...作为一种视觉效果，您可以隐藏数据输入区域并显示其他内容。 将表单封装在中，并将其hidden属性绑定到HeroFormComponent.submitted属性。
获取英雄数据 HeroService 可以从任何地方获取数据：Web 服务、本地存储（LocalStorage）或一个模拟的数据源。...从组件中移除数据访问逻辑，意味着将来任何时候你都可以改变目前的实现方式，而不用改动任何组件。 这些组件不需要了解该服务的内部实现。 这节课中的实现仍然会提供模拟的英雄列表。...这种赋值是同步的，这里包含的假设是服务器能立即返回英雄数组或者浏览器能在等待服务器响应时冻结界面。 当 HeroService 真的向远端服务器发起请求时，这种方式就行不通了。...*ngIf 只有在有消息时才会显示消息区。 *ngFor 用来在一系列 元素中展示消息列表。...当你把 最终代码 某一页的内容添加到 messages.component.css 中时，这些消息会变得好看一些。 刷新浏览器，页面显示出了英雄列表。
显示数据 在 Angular 中最典型的数据显示方式，就是把 HTML 模板中的控件绑定到 Angular 组件的属性。... 小结 带有双花括号的插值表达式 (interpolation) 来显示一个组件属性 用 ngFor 显示数组 用一个 TypeScript 类来为你的组件描述模型数据并显示模型的属性 用 ngIf...(click)="deleteHero()" 中的 deleteHero 就是这个数据绑定组件上的一个方法。 模板语句不能引用全局命名空间的任何东西。...例如，可能希望把数字显示成金额、强制文本变成大写，或者过滤列表以及进行排序。 Angular 管道对像这样的小型转换来说是个明智的选择。 管道是一个简单的函数，它接受一个输入值，并返回转换结果。...ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。
{{title}} 9、Angular使用[InnerHtml]中正常显示富文本内容： <div class...ngFor循环的使用: 属性index、count、first、last、even、odd index属性提供当前对象的索引 count提供当前数据集的长度，类似于datasource.length...first返回当前列表项是否为第一个 last返回当前列表项是否为最后一个 even返回当前列表项index是否为偶数，通常用在增加样式用来区分行与行之间 odd返回当前列表项index是否为奇数 <ul...元素使用的 CSS 类 ng-class-even 类似 ng-class，但只在偶数行起作用 ng-class-odd 类似 ng-class，但只在奇数行起作用 ng-click 定义元素被点击时的行为...ng-open 指定元素的 open 属性 ng-options 在 列表中指定 ng-paste 规定粘贴事件的行为 ng-pluralize 根据本地化规则显示信息
本系列教程的主要内容来源于 egghead.io get-started-with-angular 视频教程，但针对视频中的介绍的知识点做了适当地补充，建议有兴趣的同学直接查看该视频教程。...第五节 - 注入服务 新建服务 $ ng g s mail 在命令行窗口运行以上命令后，将输出以下内容： CREATE src/app/mail.service.spec.ts (362 bytes)...指令 在 Angular 中我们可以使用 ngFor 指令来显示数组中每一项的信息。...使用 ngFor 指令 更新 MailService 服务 import { Injectable } from '@angular/core'; @Injectable() export class...true even: boolean —— 若当前项的索引值是偶数，则返回 true odd: boolean —— 若当前项的索引值是奇数，则返回 true 需要注意的是，*ngFor 中的 * 号是语法糖
数据绑定(Data binding) 数据绑定为应用程序提供了一种简单而一致的方法来显示数据以及数据交互，它是管理应用程序里面数值的一种机制。... *ngFor 告诉 Angular...为 sites 列表中的每个项生成一个 标签。...注入器是一个维护服务实例的容器，存放着以前创建的实例。 如果容器中还没有所请求的服务实例，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给 Angular 。...当所有的服务都被解析完并返回时， Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。
每个组件都会定义一个类，其中包含应用的数据和逻辑，并与一个 HTML 模板相关联，该模板定义了一个供目标环境下显示的视图。 ?...指令告诉 Angular 在一个列表上进行迭代 {{hero.name}}、(click) 和 [hero]把程序数据绑定到及绑定回 DOM，以响应用户的输入。...更多内容参见稍后的数据绑定部分 模板中的 标签是一个代表新组件 HeroDetailComponent 的元素 1.2.3.1 数据绑定 Angular的数据绑定标记的四种形式...该装饰器提供的元数据可以让你的服务作为依赖被注入到客户组件中。 服务是一个广义的概念，它包括应用所需的任何值、函数或特性。狭义的服务是一个明确定义了用途的类。它应该做一些具体的事，并做好。...如果所请求的服务尚不存在，注入器就会使用以前注册的服务提供商来制作一个，并把它加入注入器中，然后把该服务返回给 Angular。 ? 对于要用到的任何服务，你必须至少注册一个提供商。
但比如说，在 Angular Universal 或 Jest 测试环境中没有浏览器，没有 Window，也没有 DOM，那该怎么办呢。...因为我们使用 RxJS，所以服务可以在其中包含一个 Observable 或 Subject 并对其进行一些数据转换。...令我有些难过的是，一些 Angular 开发人员不喜欢创建自己的管道，可其实你几乎可以在任何数据转换的场景中创建管道。 这是适用于许多情况的通用管道示例： ?...s=20 RxJS 是一个未开发的世界 使用 RxJS 时，我尝试检查 RxJS 运算符的所有参数和重载，原因是有许多隐藏的选项可以使你更快地编写更强大的流。...s=20 你甚至可以制作自己的 ngFor 替代品 最后一个：Angular 对于 for...of... 之类的指令有特殊的语法。这样，你可以创建自己的 ngFor。
服务 a. 组件不应该直接获取或保存数据，它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据，而把数据访问的职责委托给某个服务 b....服务负责业务数据获取和保存，让组件只需要关注展示 c. 通过注入，服务可以在多个“互相不知道”的类之间共享信息 d....Angular CLI 命令 ng generate service 会通过给 @Injectable 装饰器添加元数据的形式 providedIn: 'root', 当你在顶层提供该服务时，Angular...添加路由 ，路由定义 会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图，因此路由包含两个属性： i. path：一个用于匹配浏览器地址栏中 URL 的字符串...的服务，用来与浏览器打交道，this.location.back() 返回上一页 HTTP a.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
