Return ngFor 循环中组件的值

Question

我的主要组件中有以下 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 值

如何访问这些索引值？

Answer 1

为此你可以使用

@Output : used to pass data from child component to parent component

父组件：

<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);
  }
}

Answer 2

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

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

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

你有：

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

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

Answer 3

如果您只想查询父组件中的 'app-loc-list-item' 个子组件，则在父组件中包含这行代码

@ViewChildren(LocListItem) listItems: QueryList<LocListItem>

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

Return ngFor 循环中组件的值

Return values from components in ngFor loop

ngfor

angular