从 ngFor 循环中的组件返回值答案

【问题标题】：Return values from components in ngFor loop从 ngFor 循环中的组件返回值
【发布时间】：2017-07-28 12:12:59
【问题描述】：

我的主要组件中有以下 html：

<app-loc-list-item *ngFor="let loc of locs; let i = index" [loc]="loc" [i]="i"></app-loc-list-item>

LocListItemComponent 看起来像这样：

import { Component, OnInit, Input } from '@angular/core';

....

export class LocListItemComponent implements OnInit {
  @Input() loc: Location;
  @Input('i') index: number;
  selected: boolean = false;

  onLocationSelect() {
    this.selected = !this.selected;
  }
}

现在，这些小组件可以有任意数量，0 和 n 之间的值可以是 selected = true。我现在想接收具有selected = true 的每个组件的index 值。

如何访问这些索引值？

【问题讨论】：

您是否正在更改从 LocListItemComponent 中选择的内容？
好点，我确实这样做了，在函数中编辑了这样做。这是一个简单的点击监听器。

标签： angular ngfor

【解决方案1】：

如果你只想从父组件中查询“app-loc-list-item”子组件，那么在父组件中包含这行代码

@ViewChildren(LocListItem) listItems: QueryList<LocListItem>

这样您就可以遍历父项中的 listItems 属性并查看哪些已被选中

【讨论】：

这听起来很有趣。我会尝试一下，看看这是否就是我需要实现的全部。
这是一个很好的答案。我喜欢它的简单。要添加的一件事是我还需要导入组件。

【解决方案2】：

为此你可以使用

@Output：用于将数据从子组件传递给父组件

父组件：

<app-loc-list-item *ngFor="let loc of locs; let i = index" [loc]="loc" [i]="i" (change)="selectChange($event)"></app-loc-list-item>

selectChange(data)
{
    console.log(data);
}

子组件：

export class LocListItemComponent implements OnInit {
  @Input() loc: Location;
  @Input('i') index: number;
  @Output()change: EventEmitter<any> = new EventEmitter<any>();
  selected: boolean = false;

  onLocationSelect() {
    this.selected = !this.selected;
    let data = { 'index' : this.index , 'selected' : this.selected }
    this.change.emit(data);
  }
}

【讨论】：

这个答案也很有效，所以我投了赞成票，但迪恩的答案要短得多，而且需要的代码更少，尤其是对孩子们来说。不过感谢您的帮助，我确实测试了您的帮助，并且也像魅力一样工作。
@Spurious，没问题，很高兴您和我也找到了 2 个解决方案。 :)

【解决方案3】：

Angular 中的组件之间没有双重数据绑定（在 AngularJs 中）。

有一些方法可以解决您的问题，一种方法是：

在您定义 locs 的地方和您的子组件中使用服务

你有：

this.yourServices.locs.splice(index, 1)

编辑：我说的不对。这将是组件之间不相关的情况。

【讨论】：

我觉得service 有点矫枉过正。我不想仅仅为一个单一用途的数组创建一个service。