如何在子组件中使用 ngFor 索引变量
How to use ngFor index variable in child component
我使用 ngFor 从数组中创建了一个列表,并且我正在通过其他组件导入该列表的元素。
在我的列表组件中,我使用 ngFor 获取索引,我想在子组件中使用这个索引(参见代码)来创建动态变量,但我似乎无法让它工作。
//main list html template
<li *ngFor="#task of taskService.tasks; #i = index" class="list-group-item">
<task-item [task]="task"></task-item>
</li>
//task item component html template
<div class="read-only">
<label [contentEditable]="taskService.editable[i] == true" ng-model="task.title">{{task.title}}</label>
<p [contentEditable]="taskService.editable[i] == true" ng-model="task.description">{{task.description}}</p>
<task-actions [task]="task"></task-actions>
</div>
//task actions component html template
<button type="button" (click)="taskService.deleteTask(task.title)" class="btn btn-danger btn-xs">delete</button>
<button type="button" (click)="taskService.editTask(i)" class="btn btn-info btn-xs">Edit</button>
<button type="button" (click)="completeTask()" class="btn btn-success btn-xs">complete</button>
在 'taskService' 中,我有一个名为 editTask(i) 的点击方法 - 我希望能够传递数组项的索引
我的 class 看起来像这样:
export taskService {
editable = [];
editTask(i){
this.editable[i] == true;
}
}
希望我已经解释得足够好,如果您需要更多信息,请告诉我!
您可以将其作为输入提供:
<task-item [task]="task" [index]="i"></task-item>
在你的 TaskItemComponent
class:
@Component({
selector: 'task-item',
(...)
})
export class TaskItemComponent {
@Input()
index: number;
(...)
}
编辑
既然要在actions组件中使用index,那么还需要定义为input:
<task-actions [task]="task" [index]="index"></task-item>
在你的 TaskItemComponent
class:
@Component({
selector: 'task-actions',
(...)
})
export class TaskItemActionsComponent {
@Input()
index: number;
(...)
}
我使用 ngFor 从数组中创建了一个列表,并且我正在通过其他组件导入该列表的元素。
在我的列表组件中,我使用 ngFor 获取索引,我想在子组件中使用这个索引(参见代码)来创建动态变量,但我似乎无法让它工作。
//main list html template
<li *ngFor="#task of taskService.tasks; #i = index" class="list-group-item">
<task-item [task]="task"></task-item>
</li>
//task item component html template
<div class="read-only">
<label [contentEditable]="taskService.editable[i] == true" ng-model="task.title">{{task.title}}</label>
<p [contentEditable]="taskService.editable[i] == true" ng-model="task.description">{{task.description}}</p>
<task-actions [task]="task"></task-actions>
</div>
//task actions component html template
<button type="button" (click)="taskService.deleteTask(task.title)" class="btn btn-danger btn-xs">delete</button>
<button type="button" (click)="taskService.editTask(i)" class="btn btn-info btn-xs">Edit</button>
<button type="button" (click)="completeTask()" class="btn btn-success btn-xs">complete</button>
在 'taskService' 中,我有一个名为 editTask(i) 的点击方法 - 我希望能够传递数组项的索引
我的 class 看起来像这样:
export taskService {
editable = [];
editTask(i){
this.editable[i] == true;
}
}
希望我已经解释得足够好,如果您需要更多信息,请告诉我!
您可以将其作为输入提供:
<task-item [task]="task" [index]="i"></task-item>
在你的 TaskItemComponent
class:
@Component({
selector: 'task-item',
(...)
})
export class TaskItemComponent {
@Input()
index: number;
(...)
}
编辑
既然要在actions组件中使用index,那么还需要定义为input:
<task-actions [task]="task" [index]="index"></task-item>
在你的 TaskItemComponent
class:
@Component({
selector: 'task-actions',
(...)
})
export class TaskItemActionsComponent {
@Input()
index: number;
(...)
}