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

在ngFor循环中点击div的角度返回id

,可以通过以下步骤实现:

  1. 在HTML模板中,使用ngFor指令循环渲染多个div,并绑定一个点击事件,同时传入当前循环项的id作为参数,例如:
代码语言:html
复制
<div *ngFor="let item of items" (click)="onClick(item.id)">
  <!-- div内容 -->
</div>
  1. 在组件的Typescript文件中,定义一个onClick方法来处理点击事件,并接收id作为参数,例如:
代码语言:typescript
复制
onClick(id: number) {
  // 处理点击事件,可以根据id进行相应的操作
  console.log("点击了div,id为:" + id);
}

这样,当点击任意一个div时,会触发onClick方法,并将对应div的id作为参数传入。你可以根据具体需求,对id进行进一步的处理和操作。

关于ngFor循环、事件绑定和参数传递的更多详细信息,你可以参考腾讯云的前端开发文档:

请注意,以上链接是腾讯云的相关文档,仅供参考。

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

相关·内容

AngularDart4.0 指南- 模板语法二 顶

他们输入框输入文字。 他们从列表中选择项目。 他们点击按钮。 这样用户操作可能导致数据流向相反方向:从元素到组件。 了解用户操作唯一方法是侦听某些事件,例如按键,鼠标移动,点击和触摸。...字符串“let hero of heroes”是指: 取英雄列表每个英雄,将其存储本地英雄循环变量,并使其可用于每次迭代模板HTML。...模板输入变量 hero之前let关键字创建一个名为hero模板输入变量。 ngFor指令迭代由父组件heroes属性返回heroes,并在每次迭代期间将hero设置为列表的当前项目。...* ngFor与index(索引) NgFor指令上下文index属性返回每个迭代项目的从零开始索引。 您可以捕获模板输入变量index,并在模板中使用它。...它别无选择,只能拆除旧DOM元素并插入所有新DOM元素。 Angular可以通过trackBy避免这种流失。 向组件添加一个返回NgFor应跟踪值方法。 在这个例子,这个值就是英雄ID

29.9K20

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

必备条件 继续本“英雄之旅”页面之前,请确认您在“英雄编辑器”页面之后具有以下结构。 如果您结构不匹配,请返回该页面以弄清楚您错过了什么。 ? 如果该应用尚未运行,请启动该应用。... id: {{hero.id}} name: <input [(ngModel)]="hero.name...<em>在</em>显示数据<em>的</em>Showing a list property with *<em>ngFor</em>部分阅读更多关于<em>ngFor</em>和模板输入变量和模板语法页<em>的</em><em>ngFor</em>部分 <em>在</em>节点内添加内容hero模板变量来显示英雄属性...这是你<em>在</em><em>ngFor</em>指令<em>中</em>定义<em>的</em>同一个英雄变量。 在用户输入页面和模板语法页面的事件绑定部分了解有关事件绑定<em>的</em>更多信息。...<em>在</em>结构指令页面和模板语法页面的内置指令部分阅读有关ngIf和<em>ngFor</em><em>的</em>更多信息。 格式化选中hero 当选择<em>的</em>英雄细节显示<em>在</em>列表下方时,很难<em>在</em>列表<em>中</em>识别选定<em>的</em>英雄。

3K30

Angular 显示英雄列表

它会为列表每项数据复写它宿主元素。 在这个例子  就是 *ngFor 宿主元素 heroes 就是来自 HeroesComponent 类列表。...主从结构 当用户主列表中点击一个英雄时,该组件应该在页面底部显示所选英雄详情。 本节,你将监听英雄条目的点击事件,并更新英雄详情。...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面 *ngFor 表达式定义那个。...}} Details  id: {{selectedHero.id}}      name:      <input [...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。

4.4K70

Angular 显示英雄列表

它会为列表每项数据复写它宿主元素。 在这个例子  就是 *ngFor 宿主元素 heroes 就是来自 HeroesComponent 类列表。...主从结构 当用户主列表中点击一个英雄时,该组件应该在页面底部显示所选英雄详情。 本节,你将监听英雄条目的点击事件,并更新英雄详情。...Angular 会把所点击  上 hero 对象传给它,这个 hero 也就是前面 *ngFor 表达式定义那个。...把显示英雄详情 HTML 包裹在一个  。 并且为这个 div 添加 Angular  *ngIf 指令,把它值设置为 selectedHero。...点击一个英雄,它详情就出现了。 这个应用看起来又再次工作正常显示了。 英雄显示列表,当你单击英雄名字时候,有关你单击英雄详细信息就显示页面的底部了。

4K30

Angular学习资料大全和常用语法汇总(让后端程序员轻松上手)

{{item.value}} </div...10、Angular ngFor循环使用: 属性index、count、first、last、even、odd index属性提供当前对象索引 count提供当前数据集长度,类似于datasource.length...first返回当前列表项是否为第一个 last返回当前列表项是否为最后一个 even返回当前列表项index是否为偶数,通常用在增加样式用来区分行与行之间 odd返回当前列表项index是否为奇数 <...元素使用 CSS 类 ng-class-even 类似 ng-class,但只偶数行起作用 ng-class-odd 类似 ng-class,但只奇数行起作用 ng-click 定义元素被点击行为...HTML 元素 ng-href 为 the 元素指定链接 ng-if 如果条件为 false 移除 HTML 元素 ng-include 应用包含 HTML 文件 ng-init 定义应用初始化值

5.3K41

Angular 快速学习笔记(1) -- 官方示例要点

把它标记为一个 HeroService 注入点 ngOnInit 调用service获取数据 a. 虽然构造函数也可以调用,但是我们需要让构造函数保持简单,只做初始化操作 b....) {} {{message}} 路由 a....添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者浏览器地址栏输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏 URL 字符串...component,构造函数增加ActivatedRoute 、location i....return of(result as T); }; } 控制台中汇报了这个错误之后,这个处理器会汇报一个用户友好消息,并给应用返回一个安全值,让它继续工作,可以使用

3.6K00

Angular 快速学习笔记(1) -- 官方示例要点

把它标记为一个 HeroService 注入点 ngOnInit 调用service获取数据 a. 虽然构造函数也可以调用,但是我们需要让构造函数保持简单,只做初始化操作 b....) {} {{message}} 路由 a....添加路由 ,路由定义 会告诉路由器,当用户点击某个链接或者浏览器地址栏输入某个 URL 时,要显示哪个视图,因此路由包含两个属性: i. path:一个用于匹配浏览器地址栏 URL 字符串...component,构造函数增加ActivatedRoute 、location i....return of(result as T); }; } 控制台中汇报了这个错误之后,这个处理器会汇报一个用户友好消息,并给应用返回一个安全值,让它继续工作,可以使用

3.6K50

angular知识点梳理第二篇-基本语法

,但是angular我们引入框架一个核心模块FormsModule才可以,该指令就是将数据驱动视图改变!...app.modules.ts引入forms模块 // 核心模块 import { NgModule } from '@angular/core'; //引入forms模块实现数据双向绑定 import...-- 使用{{}}进行数据获取 --> {{inputData}} 运行效果 NgFor NgFor和我们jsfor循环渲染数据是一致,所以这里是比较容易理解,简单演示一下...{{item.id}} 运行效果 NgIf NgIf指令是可以控制页面元素显示与消失,这里和隐藏要区别开,他效果和cssdisplay:none效果是一致,和visibility...:{{isShow}} 我是一个div块 运行效果 true显示: false不显示: Ng-container ng-container

2.5K30

AngularDart 4.0 高级-结构指令 顶

三种常见内置结构指令 - NgIf,NgFor和NgSwitch ... - 模板语法指南中进行了描述,并在整个Angular文档示例中进行了介绍。...其余,包括它class属性,移动到元素。 这些形式都没有实际呈现。 只有最终产品DOM结束。 ?...NgFor指令具有比本指南中显示NgIf更多功能,包括必需和可选。 至少NgFor需要一个循环变量(let hero)和一个列表(heroes)。...您可以分配给ngFor字符串启用这些功能,这是您在Angularmicrosyntax编写。...当你编写自己结构指令时,可以使用这些微观语法机制。 研究NgIf和NgFor源代码是了解更多信息好方法。 模板输入变量 模板输入变量是一个变量,其值可以模板单个实例引用。

16K20

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

你离开地方 在前一页,您学会了仪表板和固定英雄列表之间导航,沿途编辑选定英雄。 这是这个页面的起点。 继续英雄之旅之前,请确认您具有以下结构。 ?...id : int.parse(id); 英雄和HTTP 目前HeroService实现返回一个用模拟英雄解决Future。...添加保存英雄详情能力 英雄细节模板末尾,添加一个保存按钮,其中包含一个点击事件绑定,调用一个名为save()新组件方法。...)" /> <div *ngFor="let hero of heroes | async" (click)="gotoDetail(hero)" class=...仪表板搜索框输入一些文字。 如果你输入字符匹配任何现有的英雄名字,你会看到这样东西。 ? 应用程序结构和代码 查看此页面的实例(查看源代码)示例源代码。 确认您具有以下结构: ?

11K30

AngularDart4.0 指南- 表单 顶

你会看到一个样式化表单! 使用* ngFor添加powers 英雄必须从一个固定机构批准权力列表中选择一个超级大国。 您在内部维护该列表(HeroFormComponent)。...您将在表单添加一个select,并使用ngFor(先前“显示数据”页面中看到一种技术)将选项绑定到powers列表。...*ngFor="let p of powers" [value]="p">{{p}} 这段代码重复列表每个power 标签。...某个时候,它可能看起来像这样: ? 诊断结果表明数值确实是从输入流向模型,再返回。 这是双向数据绑定。 有关更多信息,请参见模板语法页面上与NgModel双向绑定。...'is-valid' : 'is-invalid'; return {validityClass: true}; } 使用此方法返回映射值绑定到NgClass指令 - 模板语法页面详细了解此指令及其替代方法

17.4K30
领券