angular - 如何将 ngFor 循环的索引值传递给组件?

标签 angular typescript angular2-services

<分区>

我的代码中有一个 ngFor 循环。 在这个 ngFor 循环中我有一个 div,点击这个 div 我想将索引值传递给类型脚本文件。

我是 Anglular 2 的新手,我们将不胜感激。

例如:

`<div *ngFor="let y of characters;let i = index">
    <div (click)="passIndexValue()">
    </div>
<div>`

最佳答案

<div *ngFor="let y of characters;let i = index">
    <div (click)="passIndexValue(i)">
    </div>
<div>`


passIndexValue(index){
   console.log(index);//clicked index
}

您也可以像这样将值传递给组件(假设下面使用@Input)

<div *ngFor="let y of characters;let i = index">
    <childComponent [index]="i">
    </childComponent>
<div>`

然后获取组件对象上的值:

@Input() index: number;

然后像这样直接在子组件的模板中使用它:

<div id="mydivinstance_{{index}}"></div>

从而允许组件具有基于 *ngFor 循环的唯一 ID。

关于angular - 如何将 ngFor 循环的索引值传递给组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44612400/

相关文章:

angular - 从 Angular 7 更新到 8 后的 "ERROR in Cannot read property ' 映射 ' of undefined"

javascript - 如何在 Angular 2 中正确使用 forEach 循环?

javascript - 访问引导服务的变量

json - 如何将外部 JSON 文件加载到 Angular 2 中的测试中?

javascript - 如何使用 CSS 和 html 在容器内动态创建和排列复选框?

javascript - 如何用lodash改进这个例程?

Angular 2 从 CanActivate 服务导航到根目录

angular - 获取服务中的第一个路由参数

node.js - USB 细节检测问题 |使用带 Angular 和 Electron 的 node-hid

angular - 在 Angular 中订阅查询字符串参数