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

如何在angular 8中使用*ngFor根据API响应显示不同的不同图标?

在Angular 8中,可以使用ngFor指令根据API响应来显示不同的图标。ngFor指令用于循环遍历一个集合,并根据集合中的每个元素来生成相应的HTML代码。

首先,确保已经导入了HttpClient模块,以便能够进行API请求。在组件中,通过注入HttpClient来发送API请求并获取响应数据。

在组件的HTML模板中,可以使用*ngFor指令来遍历API响应的数据,并根据每个元素的特定属性来显示不同的图标。假设API响应的数据是一个包含图标信息的数组,每个元素都有一个icon属性表示图标的名称。

以下是一个示例代码:

代码语言:txt
复制
<!-- 组件的 HTML 模板 -->
<div *ngFor="let item of apiResponse">
  <i [class]="'icon-' + item.icon"></i>
</div>

在上面的示例中,*ngFor指令用于遍历apiResponse数组,并将每个元素赋值给item变量。然后,使用[item.icon]来动态设置图标元素的class属性,通过拼接字符串的方式将'icon-'和item.icon的值组合起来,以便根据不同的图标名称显示不同的图标。

请注意,上述示例中的图标类名是假设的,实际应根据具体的图标库或设计规范来确定。

推荐的腾讯云相关产品:如果需要在Angular应用中使用图标,可以考虑使用腾讯云的Iconfont图标库。腾讯云Iconfont提供了丰富的图标资源,可以根据自己的需求选择合适的图标来使用。

腾讯云Iconfont产品介绍链接地址:https://cloud.tencent.com/product/iconfont

请注意,以上答案仅供参考,具体的实现方式可能会根据实际需求和项目配置而有所不同。

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

相关·内容

Angular 6.x 快速入门

基础知识 ngIf 指令简介 该指令用于根据表达式值,动态控制模板内容显示与隐藏。它与 AngularJS 1.x 中 ng-if 指令功能是等价。... ngIf 与 ngFor 指令使用示例 import { Component } from '@angular/core'; interface Address { province...组件,开发一个功能,即可以让用户动态控制技能信息显示与隐藏。...1.x 中表单 ) Reactive Forms - 响应式表单 本小节主要介绍模板驱动式表单,接下来我们来演示如何通过表单来为我们之前创建 UserComponent 组件,增加让用户自定义技能功能...router-outlet 指令 该指令用于告诉 Angular 在哪里加载组件,当 Angular 路由匹配到响应路径,并成功找到需要加载组件时,它将动态创建对应组件,并将其作为兄弟元素,插入到

14.1K20

AngularDart4.0 英雄之旅-教程-08HTTP 顶

然后使用_extractData辅助方法来解码响应主体。 响应JSON有一个单一数据属性,它拥有主叫方想要英雄列表。 所以你抓住这个列表并把它作为已解决Future值返回。...该代码还包含传播异常给调用者错误,以便调用者可以向用户显示适当错误消息。...对于模拟来说这很好,但是当你只需要一个真正服务器给所有英雄时,这是浪费。 大多数web API支持以api / hero /:id(api / hero / 11)形式获取请求。...您可以启动一个请求,取消它,并在服务器响应第一个请求之前发出不同请求。 使用期货很难实现请求取消新请求序列,但使用Streams很容易。 添加按名称搜索功能 你要添加一个英雄搜索功能英雄之旅。...您配置了内存中Web API。 您了解了如何使用Streams。

11K30

AngularDart 4.0 高级-结构指令 顶

每个结构指令都与该模板有所不同。 三种常见内置结构指令 - NgIf,NgFor和NgSwitch ... - 在模板语法指南中进行了描述,并在整个Angular文档中示例中进行了介绍。...Angular不断检查可能会影响数据绑定更改。 无论组件在做什么,它都会继续这样做。 虽然看不见,但组件及其所有后代组件都会占用资源。 性能和记忆负担可能很大,响应性可能会降低,用户什么也看不到。...Angular设置let-hero为上下文$implicit属性值,NgFor已经用当前迭代hero初始化了它值。 API指南描述了额外NgFor指令属性和上下文属性。...在这个例子中有几个这样变量:hero,i和odd。 所有前面都有关键字let。 模板输入变量与模板引用变量不同,语义和语法都不同。 您使用let关键字(let hero)声明模板输入变量。...使用星号(*)前缀表示法将它们附加到元素。当NgSwitchCase值与switch值匹配时,会显示宿主元素。

16K20

Angular 项目实现权限控制

这是我参与「掘金日新计划 · 4 月更文挑战」第9天。 上一篇文章我们讲到了 Angular 组件通信。本文我们讲讲,在项目开发中,你是否会遇到这样需求: 请根据用户登陆,限制其访问内容。...对用户权限限制,我们一般会有下面的处理方式: 对用户登陆菜单做控制 对用户行为做限制 我们结合 Angular 来讲解下这个话题。...菜单路由控制 系统开发时候,会有很多菜单,这个时候,就需要后端判断用户角色,按照用户权限返回不同菜单路由。...,拥有下面几个字段: title 字段 - 菜单标题 url 字段 - 菜单路由,对应 app-routing.module.ts 中完整 path icon 字段 - 标题前图标,二级标题没有...title: "成员管理", url: "user-manage", icon: "user-switch", // 这里是用了 angular ant design 图标 is_open

74820

Angular 中结构指令模式 - 它们是什么且怎么使用

如果你对学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在项目中使用它们。 你将学到什么 在本文中,你将学到关于 Angular 结构指令模式知识点。...*ngIf - 根据表达式返回布尔值,有条件地包含一个模版(即条件渲染模版) *ngFor - 遍历数组 *ngSwitch - 渲染每个匹配是图 下面是一个结构化指令例子。...要使用结构指令,我们需要在 HTML 模版中添加一个带有指令元素。然后根据我们在指令中设置条件或者表达式添加、删除或者替换元素。 结构指令例子 我们添加些简单 HTML 代码。...*ngFor 指令 我们使用 *ngFor 指令来遍历数组。...*ngSwitch 指令 译者加:这个指令实际开发很有用 我们使用 ngSwitch 来根据不同条件声明来决定渲染哪个元素。

3.8K20

Angular DOM 抽象概述

为了能够支持跨平台,Angular 通过抽象层封装了不同平台差异,统一了 API 接口。定义了抽象类 Renderer2 、抽象类 RootRenderer 等。...类定义,我们知道 Angular 内部把不同平台下视图层中 native 元素封装在 ElementRef 实例 nativeElement 属性中。...作用 在应用层直接操作 DOM,就会造成应用层与渲染层之间强耦合,导致我们应用无法运行在不同环境, Web Worker 中,因为在 Web Worker 环境中,是不能操作 DOM。...初学者,可能会在某个标签上同时使用 *ngIf 或 *ngFor 指令,比如: <div class="lesson" *ngIf="lessons" *ngFor="let lesson of lessons..._moduleRef.destroy(); } } 总结 本文主要介绍了 Angular 中常见引用类型, ElementRef、TemplateRef、ViewRef 等。

3.5K30

使用Angular8和百度地图api开发《旅游清单》

我们将收获: Angular8基本用法,架构 使用百度地图API实现自己地图应用 解决调用百度地图API跨域问题 对localStorage进行基础封装,进行数据持久化 material...项目的首页展示是已去过旅游地点和路线,地图路线是通过调用百度地图api实现,当然提供这样api很多,大家可以根据自己喜好去使用。其次我们可以在首页添加未来旅游规划和预算,方便后面使用。...2.引入百度地图API 官方会提供不同地图功能api地址,以下是该项目使用地址: <script type="text/javascript" src="http://<em>api</em>.map.baidu.com...class Storage {} ``` 复制代码 路由 <em>Angular</em> <em>的</em> Router 模块提供了一个服务,它可以让你定义在应用<em>的</em>各个<em>不同</em>状态和视图层次结构之间导航时要<em>使用</em><em>的</em>路径。...如果想了解完整代码,欢迎在我<em>的</em>github上查看。 接下来看看我<em>的</em>大陆页面,其实涉及<em>的</em>难点不是很多,主要是<em>根据</em>hasDone为true或false去<em>显示</em><em>不同</em><em>的</em>样式。

6K30

AngularDart 4.0 高级-管道 顶

如果管道接受多个参数,请使用冒号分隔值(slice:1:5) 修改生日模板以给日期管道一个格式参数。...当您使用管道时,Angular会选择更简单,更快速变更检测算法。  不使用管道 在下一个示例中,组件使用默认积极变化检测策略来监控并更新其hero列表中每个英雄显示。...虽然你没有得到你想要行为,但Angular并没有被破坏。 它只是使用不同变更检测算法,忽略对列表或其任何项目的更改。...下一步 管道是封装和共享常见显示值转换好方法。 像样式一样使用它们,将它们放入模板表达式中,以丰富视图吸引力和可用性。 在API参考中探索Angular内置管道库。...--> 您通过文本字符串来识别排序字段,期望管道通过索引引用属性值(hero

6.3K20

响应式编程思维艺术】 (5)Angular中Rxjs应用示例

划重点 RxJS-DOM 原文示例中使用这个库进行DOM操作,笔者看了一下github仓库,400多星,而且相关资料很少,所以建议理解思路即可,至于生产环境使用还是三思吧。...开发中Rxjs几乎默认是和Angular技术栈绑定在一起,笔者最近正在使用ionic3进行开发,本篇将对基本使用方法进行演示。...Angular应用中Http请求 Angular应用中基本HTTP请求方式: import { Injectable } from '@angular/core'; import { Observable...,运算符使用稍显抽象,且不同运算符组合使用在流程控制和数据处理方面的用法灵活多变,也是有很多套路,开发经验需要慢慢积累。...Angular中提供了一种叫做异步管道模板语法,可以直接在*ngFor微语法中使用可观测对象: <li *ngFor="let contact of contacts | async"

6.6K20

Angular 显示英雄列表

Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义那个。...英雄们显示在列表中,并且所点英雄详情也显示在了页面的下方。 修复 - 使用 *ngIf 来隐藏空白细节 该组件应该只有当 selectedHero 存在时才显示所选英雄详情。...如果用户点击了“Magneta”,这个英雄应该用一个略有不同背景色显示出来,就像这样: 所选英雄颜色来自于你前面添加样式中 CSS 类 .selected。...Angular  CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

4.4K70

Angular 6 HttpClient 快速入门

本教程将介绍如何在 Angular 6.x 中使用 HttpClient 发送 Http 请求, get、post、put 和 delete 请求。...在 Angular 4.3+ 版本之后引入了 HttpClientModule 模块,该模块提供 HttpClient 服务是已有 Angular HTTP API 演进,它在一个单独 @angular...废话不多说,现在让我们来看一下如何在 Angular 6.x 中使用 HttpClientModule 模块。...默认情况下,HttpClient 服务返回响应体,有时候我们需要获取响应相关信息,这时你可以设置请求 options 对象 observe 属性值为 response 来获取完整响应对象。...总结 本文通过 jsonplaceholder 提供 API,介绍了如何使用 HttpClientModule 模块中 HttpClient 服务,发送 Get、Post、Delete 等请求,同时介绍了如何利用

5K30

Angular快速学习笔记(2) -- 架构

使用服务好处是服务可以作为依赖被注入到组件中,实现复用,同时还能方便不同模块做通信。 组件和服务都是简单类,这些类使用装饰器来标出它们类型。...指令告诉 Angular 在一个列表上进行迭代 {{hero.name}}、(click) 和 [hero]把程序数据绑定到及绑定回 DOM,以响应用户输入。...Angular 自带了很多管道,比如 date 管道和 currency 管道,完整列表参见 Pipes API 列表。你也可以自己定义一些新管道。...当 Angular 渲染它们时候,会根据指令给出指示对 DOM 进行转换。 指令就是一个带有 @Directive 装饰器类。...1.4 路由(Routing) Angular Router 模块提供了一个服务,它可以让你定义在应用各个不同状态和视图层次结构之间导航时要使用路径。

5.2K20

Angular--Module使用

NgModule 可以将其组件和一组相关代码(服务)关联起来,形成功能单元。...imports(导入表) —— 其他模块,本NgModule声明组件需要使用它们导出类。 providers —— 本模块向全局服务中贡献那些服务创建器。 这些服务能被本应用中任何部分使用。...@NgModule 参数是一个元数据对象,用于描述如何编译组件模板,以及如何在运行时创建注入器。...app 时 CommonModule @angular/common 当你想要使用NgIf 和NgFor时 FormsModule @angular/forms 当要构建模板驱动表单时 ReactiveFormsModule...@angular/forms 当要构建响应式表单时 RouterModule @angular/router 当要使用路由功能,并且你要用到RouterLink, forRoot() 和.forChild

4.9K40

Angular2 之 结构型指令几个概念

(* 与 template) 控制宿主元素模板。 在哪里去显示,viewcontain 怎么注入,属性set语法使用,是便捷监听属性值变化途径。...弊 如果我们很快再次使用这个组件时候,重建组件代价是非常大。 当ngIf重新变成true时候,angular会重新创建该组件及其子树。angular会重新运行每个组件初始化逻辑。...标签 结构型指令,比如ngIf,使用HTML 5template标签 完成它们“魔法”。 控制Template标签内DOM添加与显示,在模板级别使用。... 这时候显示内容是'Hip! Hooray!',在Angular控制下,DOM效果是不同。 ?...要么显示包含在Template标签中,要么隐式使用*这种语法糖去包装在Template标签中。它简化了ngIf和ngFor —— 无论是写还是读。

3K20

Angular 显示英雄列表

Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面在 *ngFor 表达式中定义那个。...英雄们显示在列表中,并且所点英雄详情也显示在了页面的下方。 修复 - 使用 *ngIf 来隐藏空白细节 该组件应该只有当 selectedHero 存在时才显示所选英雄详情。...给所选英雄添加样式 所有的  元素看起来都是一样,因此很难从列表中识别出所选英雄。 如果用户点击了“Magneta”,这个英雄应该用一个略有不同背景色显示出来,就像这样: ?...Angular  CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。...用户可以选择一个英雄,并查看该英雄详情。 你使用 *ngFor 显示了一个列表。 你使用 *ngIf 来根据条件包含或排除了一段 HTML。 你可以用 class 绑定来切换 CSS 样式类。

4K30

AngularDart4.0 指南- 用户输入 顶

用户操作,点击链接,按下按钮,输入文字引发DOM事件。 本页说明如何使用Angular事件绑定语法将这些事件绑定到组件事件处理程序。 运行实例(查看源代码)。...绑定到用户输入事件 您可以使用Angular事件绑定来响应任何DOM事件。 许多DOM事件由用户输入触发。 绑定到这些事件提供了从用户获得输入方法。...每次调用之后,onKey()方法将输入框值附加到组件values属性,后跟一个分隔符(|)。 该模板使用Angular插值({{...}})来显示值属性。...传递$event 是一个待考虑做法 键入事件对象揭示了将整个DOM事件传递到方法中一个重要问题:组件与模板细节密切相关。 如果不使用Web API,组件将无法提取数据。...Angular仅在应用程序响应异步事件(击键)时才更新绑定(以及屏幕)。 这个例子绑定了keyup事件到数字0,尽可能最短模板语句。

3.4K00
领券