首页 文章

如何在子组件中使用ngFor索引变量

提问于
浏览 次
1

我使用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;
  }

}

我希望我已经解释得很好，如果您需要更多信息，请告诉我！

javascript angular angular2-template ngfor

1 回答

  • 1

    您可以将其作为输入提供：

    <task-item [task]="task" [index]="i"></task-item>

    在你的 TaskItemComponent 课程中：

    @Component({
  selector: 'task-item',
  (...)
})
export class TaskItemComponent {
  @Input()
  index: number;
  (...)
}

    Edit

    由于您希望将索引用于actions组件，因此还需要将其定义为输入：

    <task-actions [task]="task" [index]="index"></task-item>

    在你的 TaskItemComponent 课程中：

    @Component({
  selector: 'task-actions',
  (...)
})
export class TaskItemActionsComponent {
  @Input()
  index: number;
  (...)
}
    回复于

相关问题