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。我现在希望获得具有index的每个组件的selected = true值。

如何访问这些索引值？

Answer 1

为此你可以使用

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

Answer 2

如果您只想查询＆＃39; app-loc-list-item＆＃39;然后父组件中的子代码在父

中包含这行代码

@ViewChildren(LocListItem) listItems: QueryList<LocListItem>

因此您可以遍历父级中的listItems属性并查看已选择的属性

Answer 3

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

您的问题有一些方法，一种方法是：

使用您在子组件中定义loc的服务

你有：

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

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

从ngFor循环中的组件返回值

3 个答案: